要呈現的React返回組件數組未正確嵌套

Question

我的React組件渲染方法中有以下代碼

render: function() {
    return (
       <div>
           <div>div1</div>
           <div>div2</div>
           {this.getOtherDivs()}
       </div>
    );
},

getOtherDivs: function() {
   return ([
       <div>div3</div>,
       <div>div4</div>       
   ]);
},

但是，這兩個div div3和div4嵌套在單個數組中而不是分開。

當我為最頂級的div做child.length時，我得到3而不是4。

我不想將最后兩個div包裝在一個封閉的div中。

Answer 1

嘗試使用<React.Fragment /> 。

getOtherDivs: function() {
   return (
     <>
       <div>div3</div>
       <div>div4</div>
     </>       
   );
},

Answer 2

你使用map循環數組並將div直接返回到主div

render: function() {
    return (
       <div>
           <div>div1</div>
           <div>div2</div>
           {this.getOtherDivs().map(item => item)}
       </div>
    );
},

Answer 3

你可以使用map來做到這一點

聲明一個項目數組：

const items = [div3, div4];

現在你的渲染方法應該如下所示：

render() {
    return (
       <div>
           <div>div1</div>
           <div>div2</div>
           {this.items.map(item => <div>{item}</div>)}
       </div>
    );
}

如果你有一個對象數組，那么你可以這樣做：

聲明一個數組數組：

const items = [[div3, div4],[div5, div6],[div7, div8]];

然后在你的渲染方法中：

render() {
    return (
       <div>
           <div>div1</div>
           <div>div2</div>
           {this.items.map(item => 
               <div>
                   <div>item[0]</div>
                   <div>item[1]</div>
               </div>
           )}
       </div>
    );
}