Question

我有一个这样的数组：

let obj = [
    ['Banana', 'Apple'],
    ['Orange', 'Chicken'],
    ['Data', 'Beer']
];

我无法实现在列表中呈现每个项目。

我尝试了什么：

<List>
    {this.state.list.map((item, key)=>(
        {item.map((i, k) => (
            <ListItem primaryText={i}/>
        ))}
    ))}
</List>

有没有办法像React一样迭代嵌套数据？

我在这一行{item.map((i, k) => (收到错误，编译器表示它正在等待:而不是.

使用AngularJS，我可以通过以下方式轻松完成此操作：

<li ng-repeat="item in items">
    <li ng-repeat="i in item">{{i}}</li>
</li>

所以如果有相似的东西，那就太好了！

Answer 1

使用Array#concat和spread展开列表，然后使用单个Array#map进行迭代：

const arr = [
    ['Banana', 'Apple'],
    ['Orange', 'Chicken'],
    ['Data', 'Beer']
];

const List = ({ list }) => (
  <ul>
    {[].concat(...list).map((item, key)=>(
        <li key={key}>{item}</li>
    ))}
  </ul>
);

ReactDOM.render(
  <List list={arr} />,
  demo
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="demo"></div>

Answer 2

每个嵌套列表都需要存在于元素中。以下是Angular代码的字面翻译结果：

<ul>
  {items.map(item => (
    <li>
      {item.map(i => (
        <li>{i}</li>
      ))}
    <li>
  ))}
</ul>

虽然这没有多大意义，因为ul > li > li是无效的嵌套。您可能希望将item.map调用包含在另一个<ul>元素中。

React元素（通常）希望将其他React元素的数组作为子元素传递，但原始的嵌套映射却返回了数组。

使用React渲染嵌套数据

2 个答案: