javascript - Reactjs 和 Flexbox : Wrapping divs in render function making flex hard

Question

React 让我在使用 flexbox 时遇到麻烦，因为组件渲染函数中的包装 div 会影响我的 flex-directions。

根据我对 React 的理解，所有组件的 jsx 元素都应该包含在一个 div 中。例如，这有效:

return (
    <div className="com-container">
       <div className="other-stuff">
       </div>
    </div>
)

而这不是:

return (
    <div className="com-container">
    </div>
    <div className="other-stuff">
    </div>
)

然而，这让 flexbox 的行和列变得困难。例如说我们有这种弹性关系。

<Parent Column Component /> //vertical flex
  <ChildRowComponent1 />    //horizontal flex
  <ChildRowComponent2 />    //horizontal flex
  <ChildRowComponent3 />    //horizontal flex

但是 ChildRowComponent2 和 3 可以动态换出 - 这让我通过放置 ChildRowComponent2 和 3 来重构> 在它们自己的组件中，但由于所有渲染都必须包含在一个单独的 div 中，所以我得到了这个额外的 div，它弄乱了 flex 方向。

<Parent Column Component />  //vertical flex
  <ChildRowComponent1 />     //horizontal flex
  <div>                      
    <ChildRowComponent2 />   //horizontal flex now broken
    <ChildRowComponent3 />   //horizontal flex now broken
  </div>

问题:

是否有 flexbox 技巧来处理这些情况，或者我只是在构建组件时做错了什么？

Answer 1

片段解决了这个问题。你不需要任何额外的 <div>包装子元素时的元素。这不会向 DOM 添加额外的节点。

return (
 <React.Fragment>
    <div className="com-container">
    </div>
    <div className="other-stuff">
    </div>
 <React.Fragment>
)

React Fragment Documentation