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

Question

我明白你不能返回多个元素.但是这种限制导致我无法在没有帮助的情况下解决这个问题.

我正在使用另一个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>

这就是我设置实际包含的React代码的方法<ul>:

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>
    );    
  }
});

所以问题是Card和Remote组件需要返回多个列表组件.我试着让它返回一个列表组件数组但这不起作用.

这就是我所拥有的......这是失败的部分.

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

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

所以这里有其他问题.我不能这样做.所以我该怎么做？

Answer 1

问题是这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>;
});

当然,返回一个s <ul>而不是一个<li>s 数组并不是你想要的,但是作为生成合理标记的问题,它是有意义的Cards并且Remotes是子列表而不是将它们全部转储到单个列表中.