如何在渲染函數中返回多個組件？

Question

我已經制作了3個組件Batcomponent ， Bowlcomponent和Fieldcomponent 。 我正在將props傳遞給每個組件。 當字符串匹配到bat ， field或bowl ，該特定組件將呈現並顯示在網頁上。 我在return()內部返回{renderData} 。

碼：

render(){

if(this.props.type === "bat"){
 renderData = (<Batcomponent 
    prop1 = this.props.type.name
    prop2 = this.props.matches
    prop3 = this.props.email
    />)
}else if(this.props.type === "bowl"){
  renderData = (<Bowlcomponent 
    prop1 = this.props.type.name
    prop2 = this.props.matches
    prop3 = this.props.email
    />)
}else if(this.props.type === "field"){
    renderData = (<Fieldcomponent 
    prop1 = this.props.type.name
    prop2 = this.props.matches
    prop3 = this.props.email
    />)
}

}

return(){
    <div>
       {renderData}
    </div>
}

現在，我想在renderData添加Piechart組件。 我試過的

render(){

if(this.props.type === "bat"){
 renderData = (<Batcomponent 
    prop1 = this.props.type.name
    prop2 = this.props.matches
    prop3 = this.props.email
    />
    <Pie prop1 = this.props.type.name />
    )
}else if(this.props.type === "bowl"){
  renderData = (<Bowlcomponent 
    prop1 = this.props.type.name
    prop2 = this.props.matches
    prop3 = this.props.email
    />
    <Pie prop1 = this.props.type.name/>
    )
}else if(this.props.type === "field"){
    renderData = (<Fieldcomponent 
    prop1 = this.props.type.name
    prop2 = this.props.matches
    prop3 = this.props.email
    />
    <Pie prop1 = this.props.type.name/>
    )
}

}

return(){
    <div>
       {renderData}
    </div>
}

上面的代碼不起作用，如何在renderData添加其他組件？

如果我確實執行renderData = (<FirstComponent />) ，但是如果我喜歡這個-> renderData = (<FirstComponent /> <SecondComponent/>)它為什么不起作用？

Answer 1

...

renderData = (
  <div>
     <Fieldcomponent 
     prop1 = this.props.type.name
     prop2 = this.props.matches
     prop3 = this.props.email
     />
     <Pie prop1 = this.props.type.name/>
  </div>
)

JSX期望組件被包裝在div /片段中，甚至包括您在變量/函數調用中定義的內部組件。

根據您的反應版本，您可以使用Fragment或<> 。

這也可以用片段來完成

renderData = (
  <Fragment>
     <Fieldcomponent 
     prop1 = this.props.type.name
     prop2 = this.props.matches
     prop3 = this.props.email
     />
     <Pie prop1 = this.props.type.name/>
  </Fragment>
)

但是，我可能建議您進一步清理代碼...

render(){
  return(
    <div>
    { 
      this.props.type === 'bat' ? <Bat {...props} /> :
      this.props.type === 'bowl' ? <Bowl {...props} /> :
      this.props.type === 'field' ? <Field {...props} /> : <Default {...props} />
    }
    </div>
  )
}

Answer 2

該代碼無效，因為必須將相鄰的JSX元素包裝在一個封閉的標記中。

React 16引入了Fragments，它使您可以包裝JSX表達式而無需添加額外的div。

如果您使用的是React 16，請使用Fragments：

 if (this.props.type === "bat") {
      renderData = (
        <React.Fragment>
          <Batcomponent
          prop1={this.props.type.name}
          prop2={this.props.matches}
          prop3={this.props.email}
        />
        <Pie prop1={this.props.type.name}/>
        </React.Fragment>
    )
   }else if ...

如果您不使用React 16，則將它們包裝在div中：

 if (this.props.type === "bat") {
      renderData = (
        <div>
          <Batcomponent
          prop1={this.props.type.name}
          prop2={this.props.matches}
          prop3={this.props.email}
        />
        <Pie prop1={this.props.type.name}/>
        </div>
    )
   }else if ...

Answer 3

處理此問題的最佳方法是制作一種哈希表（只是一個包含多個組件的對象），該哈希表將根據您的需要進行擴展，因此它可能類似於

const components = {
  bat: BatComponent,
  bowl: BowlComponent,
  field: FieldComponent
}

現在創建一個函數，將選擇合適的組件以顯示

renderComponent(){
  const { type, ...restProps } = this.props;
  const Component = components[type]
  return <Component {...restProps } />
}

現在在您的渲染功能中

render(){
  return {this.renderComponent()}
}

如果您需要返回2個組件，則最好將這2個組件包裝成一個組件並將其添加到包含這些組件的對象（哈希表）中

Answer 4

這是使用兒童道具的干凈exp：

const CompA = ({ children }) => {
  return (
    <div>
      <h3>Im component A</h3>
      {children}
    </div>
  );
};

參見codesandbox exp。