首页 文章

要呈现的React返回组件数组未正确嵌套

提问于
浏览 次
1

我的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中 .

javascript reactjs react-native jsx

3 回答

  • 3

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

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

    尝试使用<React.Fragment /> .

    getOtherDivs: function() {
   return (
     <>
       <div>div3</div>
       <div>div4</div>
     </>       
   );
},
    回复于
  • 0

    你可以用 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>
    );
}
    回复于

相关问题