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>

这就是我设置实际包含<ul>：

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

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

当然，返回<ul>而不是<li>的数组并不是你想要的，但是为了生成合理的标记，它对{{1}有意义并且Cards是子列表，而不是将它们全部转储到单个列表中。

Answer 2

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

Answer 3

解决此问题的解决方案。不是说它是最好的，但它是我能想出的唯一方法。

您可以使用普通的javascript函数。因为他们对你可以返回的东西没有任何限制。然后我在为实际列表创建的数组上使用了concat来添加这些元素。

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

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

3 个答案: