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

How to return multiple list components using react.js

本文关键字：列表 组件 返回 何使用 react js      更新时间：2023-09-26

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

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

所以问题是卡和远程组件需要返回多个列表组件。我试着让它返回一个列表组件数组，但没有成功。

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

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个深度。每个卡和遥控器都可以连接其他组件。

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

问题是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>的数组并不是您想要的，但作为生成合理标记的问题，Cards和Remotes作为子列表是有意义的，而不是将它们全部转储到一个列表中。

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

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

您可以使用一个简单的javascript函数。因为他们对你可以返回的东西没有限制。然后，我只是在为实际列表创建的数组上使用concat来添加这些元素。

function Card(device) {
    return device.cards.map(function(card) {
       return (<li>{card.name}</li>);
    });
}
相关文章：