如何在 React 中高效渲染數組？

React 陣列渲染變得簡單

在 React 中渲染元素清單是一項常見任務。以下是如何有效地做到這一點：

第一種方法：

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

此方法涉及建立React 元素數組，然後將它們渲染在容器div 中。

第二種方法：

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

此方法在return語句中直接使用map函數，簡化了語法。

這兩種方法中的任何一種可用於在 React 中渲染物件數組，具體取決於您的偏好。

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