React 返回要渲染的组件数组未正确嵌套答案

【问题标题】：React return array of components to render is not nesting properlyReact 返回要渲染的组件数组未正确嵌套
【发布时间】：2018-07-08 12:22:56
【问题描述】：

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

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

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

但是，div3 和 div4 这两个 div 嵌套在单个数组中，而不是分开。

当我为最顶部的 div 执行 children.length 时，我得到的是 3 而不是 4。

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

【问题讨论】：

我使用 React v16.2.0 做了一个快速测试，纯 HTML 检查和 Chrome 中的 React 选项卡（来自 React DevTools）在另一个 div 中显示了 4 个 div。您能否提供有关您如何致电children.length 的详细信息？这究竟是从哪里来的？另外，您使用的是什么版本的 React？
你的代码应该可以工作

标签： javascript reactjs react-native jsx

【解决方案1】：

尝试使用<React.Fragment />。

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

【讨论】：

【解决方案2】：

您使用map 循环数组并将 div 直接返回到主 div

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

【讨论】：

为什么是map？
this.getOtherDivs() 已经返回了一个 React 元素数组。 .map(item => item) 实际上什么都不做。

【解决方案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>
    );
}

【讨论】：