Javascript 要渲染的组件返回数组嵌套不正确

我的React组件渲染方法中有以下代码

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

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

render:function（）{
返回(
第一组
第二组
{this.getOtherDivs（）}
);
},
getOtherDivs:function（）{
返回([
第三组，
第四组
]);
},

但是，这两个div

div3

和

div4

嵌套在单个数组中，而不是分开的

当我做children.length的时候，我得到的是3而不是4

---

我不想将最后两个div封装在一个封闭的div中。

您可以使用

map

在数组上循环，并将div直接返回到主div

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

render:function（）{
返回(
第一组
第二组
{this.getOtherDivs（）.map（item=>item）}
);
},

尝试使用

getOtherDivs:function（）{
返回(
第三组
第四组
);
},

您可以使用

map

声明一个项目数组：

const items = [div3, div4];

现在，渲染方法应该如下所示：

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

然后在渲染方法中：

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

render（）{
返回(
第一组
第二组
{this.items.map（item=>
项目[0]
项目[1]
)}
);
}

我使用React v16.2.0做了一个快速测试，Chrome中的纯HTML inspect和React选项卡（来自React DevTools）在另一个div中显示了4个div。您能否提供有关如何调用

children.length的详细信息？这到底是从哪里来的？另外，您使用的是什么版本的React？您的代码应该可以工作。为什么
映射
？
this.getOtherDivs（）
已经返回React元素数组
.map（item=>item）
实际上什么都不做。
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>
    );
}