Reactjs和Flexbox：在渲染功能中包装div使得flex变得更加困难 [英] Reactjs and Flexbox: Wrapping divs in render function making flex hard

问题描述

从我对React的理解中，我们可以了解到React是一个很好的解决方案， ，所有组件的jsx元素应该被封装在一个div中。例如：

  return（
< div className =com-container> 
< div className =other-stuff> 
< / div> 
< / div> 
）
   
 
 $ b 
然而这并不是：
 
 $ $ p $  return（
< div className =com-container> 
< / div> 
< div className =other-stuff> 
< / div> 
）
  

然而，这使用flexbox行和列变得困难。例如说，我们有这个灵活的关系。

 < Parent Column Component /> // vertical flex 
< ChildRowComponent1 /> // horizo​​ntal flex 
< ChildRowComponent2 /> // horizo​​ntal flex 
< ChildRowComponent3 /> // horizo​​ntal flex 
  

但是 ChildRowComponent2 & 3 可以被动态地换出 - 这导致我通过放置 ChildRowComponent2 & 3 在他们自己的组件中，但是因为所有的渲染都必须封装在一个div中，所以我得到了这个额外的div来弄乱flex的方向。

 < Parent Column Component /> // vertical flex 
< ChildRowComponent1 /> // horizo​​ntal flex 
< div> 
< ChildRowComponent2 /> //横向折曲现在被破坏
< ChildRowComponent3 /> //横向折曲现在被破坏
< / div> 
  

问题：

窍门来处理这些情况，或者我只是在做我的构造我的组件的方式有什么问题吗？ 解决方案

组件 ChildRowComponent2 & 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} />）; （$ this.props.shouldHaveThirdChild）{
 result.push（< ChildRowComponent3 key = {3} /> gt; 
} 
 if 
} 
返回结果; 
 
 
 
 
 
 $ b如果你想知道为什么你需要键道具，这里是一个解释。
 
React is getting me in trouble with flexbox because of the wrapping div in a component's render function is throwing off my flex-directions.

From what I understand about React, all the component's jsx elements should be wrapped up in a single div. For example this works:
return (
    <div className="com-container">
       <div className="other-stuff">
       </div>
    </div>
)
whereas this doesn't:
return (
    <div className="com-container">
    </div>
    <div className="other-stuff">
    </div>
)
Yet this is making things hard with flexbox rows and columns. For example say we had this flex relationship. 
<Parent Column Component /> //vertical flex
  <ChildRowComponent1 />    //horizontal flex
  <ChildRowComponent2 />    //horizontal flex
  <ChildRowComponent3 />    //horizontal flex
But ChildRowComponent2 & 3 can be swapped out dynamically - which causes me to refactor by putting ChildRowComponent2 & 3 in their own component but since all rendering must be wrapped up in a single div I get this extra div that messes up the flex directions.
<Parent Column Component />  //vertical flex
  <ChildRowComponent1 />     //horizontal flex
  <div>                      
    <ChildRowComponent2 />   //horizontal flex now broken
    <ChildRowComponent3 />   //horizontal flex now broken
  </div>


Question:

Is there a flexbox trick to handle these cases or am I just doing something  wrong with how I'm structuring my components?
解决方案
Instead of creating a component that groups ChildRowComponent2 & 3, you can make it a function that returns a list. Then you can do this in your Parent component:
  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;
  },
If you're wondering why do you need the key prop, here is an explanation.

                        
这篇关于Reactjs和Flexbox：在渲染功能中包装div使得flex变得更加困难的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！