reactjs - 在 React 的 if 语句中包含多个组件和

Question

我试图包含多个 components和 <div>在React在一个“if”语句下。自 React只返回一个元素它需要所有 components和/或 <div>元素被包裹在一个root <div>元素。尝试过但仍然无法管理。

我需要 <Divider>组件和 <div className="prod-flow">在条件语句里面。这意味着如果条件为假，我需要隐藏整个 block 。目前<Divider>组件不能隐藏，因为它在 if 语句之外。不想两次使用相同的条件来验证。

尝试过:用一个 <div> 包裹所有元素- 没用。用 [] 包装整个 block 里面{} - 没用。

        <Divider text="PRODABC" className="blue" />
        <div className="prod-flow">
           {supplyProducts(this.state.products).length > 0 &&
             <FlowSettings
               flow={this.state.room.attributes.flow}
               products={supplyProducts(this.state.products)}
               setpointChange={this.handleSetpointChange}
               sumChange={this.handleSumChange} />
           }
        </div>

需要:类似

return(
   <div>
     <Component1 />
     <div>
     ...
     ...
     </div>

     {supplyProducts(this.state.products).length > 0 &&
     ...
     ... //<Component2 />
     ... //<div>
          //<Component3 />
     ... //</div>
     }
  </div>
  );

Answer 1

在条件渲染上放置包装器!

return(
   <div>
     <Component1 />
     <div>...</div>
     {supplyProducts(this.state.products).length > 0 &&
       <div> //Wrapper here
         <Component2 />
         <div>...</div>
         <Component3 />
         <div>...</div>
       </div>
     }
  </div>
);