Javascript 如何使用react.js返回多个列表组件

我知道不能返回多个元素。 但是这个限制使我无法在没有帮助的情况下解决这个问题

我正在使用另一个HTML设计，它使用1深度列表来表示3深度列表。作为最后手段，我可以改变这一点

我正在转换为React的HTML示例。每次GET请求时，设备、卡和遥控器的数量都可能不同

 <ul class='deviceList'>
   <li>Device A`</li>
   <li>Cards Connected in Device A</li>
   <li>Card 1</li>
   <li>Card 2</li>
   <li>Remotes Connected to Device A</li>
   <li>Remote 1</li>
   <li>Device B</li>
   <li>Cards Connected to Device B</li>
   <li>Card 1</li>
   <!-- ... could go on for more ...-->
 </ul>

装置A`
设备A中连接的卡
卡1
卡2
连接到设备A的遥控器
远程1
装置B
连接到设备B的卡
卡1

这就是我如何设置实际包含

的React代码的方法：

var DeviceList = React.createClass({
  render: function() {
    var deviceList = this.props.devices.map(function (device) {
      return [
        <DeviceTitle title='{device.name}' />,
        <ComponentTitle title='Cards' />,
        <Cards cards={device.cards} />,
        <ComponentTitle title='Remotes' />,
        <Remotes remotes={device.remotes} />
      ];
    });

    return (
      <ul className='deviceList'>
        {deviceList}
      </ul>
    );    
  }
});

var DeviceList=React.createClass({
render:function（）{
var deviceList=this.props.devices.map（函数（设备）{
返回[
,
,
,
,
];
});
返回(

{deviceList}

);    
}
});

所以问题是卡和远程组件需要返回多个列表组件。我试图让它返回一个列表组件数组，但这不起作用

这是我的。。这是失败的部分

var cards = React.createClass({
  render: function() {
    var cards = this.props.cards.map(function (card) {
       return (
         <li>{card.name}</li>
       );
    });

    // illegal
    return {{cards});
  }
});

// Remote is a little different but same problem

var cards=React.createClass({
render:function（）{
var cards=this.props.cards.map（函数（卡片）{
返回(
{card.name}
);
});
//非法的
返回{{卡片}）；
}
});
//远程是一个有点不同但相同的问题

另外，为了使这更简单，我只显示了3个深度列表，但实际上是4个深度。每个卡和遥控器都可以连接其他组件

正如这里的其他问题所显示的那样。我不能这样做。那么我该怎么办呢？

var cards=React.createClass({
render:function（）{
var cards=this.props.cards.map（函数（卡片）{
返回(
{card.name}
);
};
返回（
{cards}
）；
}
})问题是
return{{{cards}}；
不是有效的JavaScript。在JSX中只使用像那样的大括号。（第6行还缺少右括号。）
cards
只是一个常规JavaScript变量，所以函数应该像任何其他变量一样返回它：

var cards = React.createClass({
  render: function() {
    var cards = this.props.cards.map(function (card) {
       return (
         <li>{card.name}</li>
       );
    });

    return <ul>{cards}</ul>;
});

var cards=React.createClass({
render:function（）{
var cards=this.props.cards.map（函数（卡片）{
返回(
{card.name}
);
});
返回
{cards}
；
});

当然，返回一个
而不是一个
数组并不是你想要的，但是作为一个生成合理标记的问题，将
卡和
遥控器作为子列表而不是将它们全部转储到一个列表中是有意义的。
解决这个问题的方法。不要说这是bes但这是我能想出的唯一方法

您可以使用一个普通的javascript函数。因为它们对您可以返回的内容没有约束。然后我在为实际列表创建的数组上使用concat来添加这些元素

function Card(device) {
    return device.cards.map(function(card) {
       return (<li>{card.name}</li>);
    });
}

功能卡（设备）{
返回设备.卡.映射（功能（卡）{
返回（
{card.name}
）；
});
}
您可以尝试在渲染函数中仅使用此代码-`return this.props.cards.map（函数（card）{return（
{card.name}
）}）？现在就解决问题，这将是你在可维护性方面的胜利，也是用户在可用性方面的胜利，难道不是比竭尽全力适应糟糕的标记更好吗？我不确定我是否同意这一理念，但每个人都有自己的想法。我认为最好的解决方案就是如上所述输出项目（带有父级
）然后使用CSS使它们看起来像是同一个列表。这应该很简单。任何其他解决方案都会花费您大量的时间和麻烦，无论是现在还是将来的某个时候。虽然这是我想要避免的。这似乎是唯一的方法。我最终只是将其包装在
中，但这确实有效。