Question

我正在尝试在一个'if'语句下的components中包含多个<div>和React。由于React仅返回一个元素，因此需要将所有components和/或<div>元素包含在一个root <div>元素中。试过但仍无法管理。

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

尝试：用一个<div>包装所有元素 - 不起作用。将[]内的{}包裹在整个区块中 - 不起作用。

        <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>
);

Answer 2

你的渲染方法中的

做了类似的事情。

render () {

   const renderMore = () => (
       <div>
         <Component1/>
         <div></div>
         <Component2/>
       </div>
   );

   return () (
       <div>
       <Component1 />
       <div>
       ...
       ...
       </div>
      {supplyProducts(this.state.products).length > 0 && renderMore()}
   )
}

在React中的if语句中包含多个组件和<div>

2 个答案: