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

问题描述

你可以告诉我如何在react js中呈现列表。
我喜欢这个

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

  class First扩展React.Component { 
构造函数（道具）{
 super（道具）; 
 
} 
 
 render（）{
 const data = [{name：test1}，{name：test2}]; 
 const listItems = data.map（（d）=>< li key = {d.name}> {d.name}< / li> ;; 
 
 return（ 
< div> 
 hello 
< / div> 
）; 
} 
} 
  

解决方案

您可以通过两种方式实现：

第一：

  render（）{
 const data = [{name： test1}，{name：test2}]; 
 const listItems = data.map（（d）=>< li key = {d.name}> {d.name} < / li>）; 
 
 return（
< div> 
 {listItems} 
< / div> 
）; 
} 
  

第二名：直接在回程中写入地图功能

  render（）{
 const data = [{name：test1}，{name： test2}]; 
返回（
< div> 
 {data.map（函数（d，idx）{
 return（< li key = {idx}> ; {d.name}< / li>）
 }）} 
< / div> 
）; 
} 
  

could you please tell me how to how to render 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屋！