如何在 React 中渲染物件數組？

在 React 中渲染物件陣列

該查詢示範了在 React 中渲染物件清單的嘗試。但是，它缺少 render() 方法中必要的 return 語句。讓我們解決這個問題並提供一個全面的解決方案：

解決方案：

要在React 中渲染物件數組，有兩種方法：

方法一：將輸出儲存到變數

<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>

中這兩種方法都將資料對應到元素清單。根據 React 的要求，每個元素都分配一個唯一的 key prop。這個鍵確保了高效率的重新渲染並維護每個列表項目的識別。

這些解決方案提供了一種可靠且靈活的方式來在 React 中渲染物件數組。

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