如何在 React 中渲染对象数组? [英] How to render an array of objects in React?

问题描述

你能告诉我如何在 react js 中渲染一个列表吗?我喜欢这个

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

class 首先扩展 React.Component {构造函数(道具){超级(道具)；}使成为() {const data =[{name":test1"},{name":test2"}];const listItems = data.map((d) => 
{d.name}
;返回 (<div>你好

);}}

解决方案

你可以通过两种方式做到:

第一:

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

);}

第二:直接在return里写map函数

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

);}

could you please tell me how to render a list in react js. I do like this

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

解决方案

You can do it in two ways:

First:

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

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

Second: Directly write the map function in the return

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

这篇关于如何在 React 中渲染对象数组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！