如何在 React 中渲染对象数组？

Question

你能告诉我如何在 React js 中呈现一个列表吗？

我喜欢这个

https://plnkr.co/edit/X9Ov5roJtTSk9YhqYUdp?p=preview

class First extends React.Component {
  constructor (props){
    super(props);

  }

  render() {
     const data =[{"name":"test1"},{"name":"test2"}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>;

    return (
      <div>
      hello
      </div>
    );
  }
}

原文由 user944513 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以通过两种方式做到这一点：

第一的：

 render() {
 const data =[{"name":"test1"},{"name":"test2"}];
 const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

 return (
 <div>
 {listItems }
 </div>
 );
 }

二： 在return中直接写map函数

render() {
 const data =[{"name":"test1"},{"name":"test2"}];
 return (
 <div>
 {data.map(function(d, idx){
 return (<li key={idx}>{d.name}</li>)
 })}
 </div>
 );
 }

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

https://facebook.github.io/react/docs/jsx-in-depth.html#javascript-expressions

您可以将任何 JavaScript 表达式作为子表达式传递，方法是将其包含在 {} 中。例如，这些表达式是等价的：

>  <MyComponent>foo</MyComponent>
>
> <MyComponent>{'foo'}</MyComponent>
>
> ```
>
> 这对于呈现任意长度的 JSX 表达式列表通常很有用。例如，这会呈现一个 HTML 列表：
>
> ```
>  function Item(props) {
>   return <li>{props.message}</li>;
> }
>
> function TodoList() {
>   const todos = ['finish doc', 'submit pr', 'nag dan to review'];
>   return (
>     <ul>
>       {todos.map((message) => <Item key={message} message={message} />)}
>     </ul>
>   );
> }
>
> ```

* * *

class First extends React.Component { constructor(props) { super(props); this.state = { data: [{name: ‘bob’}, {name: ‘chris’}], }; }

render() { return (

{this.state.data.map(d =>
• {d.name}
)}

); } }

ReactDOM.render( , document.getElementById(‘root’) );

“`

原文由 dting 发布，翻译遵循 CC BY-SA 3.0 许可协议