小编典典

在ReactJs中渲染对象数组

reactjs

我试图通过对象属性(此示例的名称)并在函数的轻松循环中列出它们。我发现这样做有些尴尬,但这似乎不正确。

这是我得到的:

const ItemsToSell = [{"Name":"Cup","Price":"99.99"},{"Name":"IPhone","Price":"99.99"},{

"Name":"Pen","Price":"99.99"}]



function ListItem(props) {

  return <li>{props.value}</li>;

}



function NumberList(props) {

  const a = props.numbers;

  return (

    <ul>

      {a.map((number) =>

        <ListItem  value={ItemsToSell[number].Name} />

      )}

    </ul>

  );

}



const numbers = [0,1, 2];

ReactDOM.render(

  <NumberList numbers={numbers} />,

  document.getElementById('root')

);


<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="root"></div>

有一个更好的方法吗?我只需要一个循环即可遍历对象数组,列出所需的属性并创建许多html节点之一。


阅读 264

收藏
2020-07-22

共1个答案

小编典典

您可以简单地在ItemsToSell数组上 映射

const ItemsToSell = [{"Name":"Cup","Price":"99.99"},{"Name":"IPhone","Price":"99.99"},{

"Name":"Pen","Price":"99.99"}]



function ListItem(props) {

  return <li>{props.value}</li>;

}



function NumberList(props) {

  return (

    <ul>

      {ItemsToSell.map((obj, index) =>

        <ListItem  key={index} value={obj.Name} />

      )}

    </ul>

  );

}



ReactDOM.render(

  <NumberList  />,

  document.getElementById('root')

);


<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="root"></div>
2020-07-22