Question

React让我遇到了flexbox的麻烦，因为组件的渲染功能中的包装div正在抛弃我的弹性方向。

根据我对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＆amp; 3可以动态换出 - 这会让我通过放置ChildRowComponent2＆amp;重构来重构3在他们自己的组件中，但由于所有渲染都必须包含在一个div中，我得到这个额外的div会弄乱弹性方向。

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

问题：

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

Answer 1

而不是创建一个组ChildRowComponent2＆amp;组件的组件。 3，你可以使它成为一个返回列表的函数。然后，您可以在Parent组件中执行此操作：

  render: function() {
    return (
      <div className="main-container">
        <ChildRowComponent1 />
        { this.renderOtherChildren() }
      </div>
    )
  },
  renderOtherChildren: function () {
    var result = [];
    if (this.props.shouldHaveSecondChild) {
      result.push(<ChildRowComponent2 key={ 2 } />);
    }
    if (this.props.shouldHaveThirdChild) {
      result.push(<ChildRowComponent3 key={ 3 } />);
    }
    return result;
  },

如果您想知道为什么需要key道具，here is an explanation。

Answer 2

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

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

React Fragment Documentation

Reactjs和Flexbox：在渲染函数中包装div使得flex变得困难

问题：

2 个答案: