如何使用 Map 函數在 React 中渲染物件陣列？

在 React 中渲染物件陣列

在 React 中渲染清單對於顯示動態資料至關重要。本指南展示如何使用 map 函數在 React 中高效渲染物件陣列。

方法：

考慮以下React 組件：

<code class="javascript">class First extends React.Component {
  render() {
    const data = [{ name: "test1" }, { name: "test2" }];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div>
        Hello
      </div>
    );
  }
}</code>

渲染對像數組有兩種主要方法：

第一種方法：

將映射的陣列分配給變數並在渲染函數中返回它:

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

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

第二種方法：

直接將map函數嵌入return語句：

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

以上是如何使用 Map 函數在 React 中渲染物件陣列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！