Question

我制作了3个组件Batcomponent，Bowlcomponent，Fieldcomponent。我将props传递给每个组件。当字符串与bat或field或bowl匹配时，特定组件将在网页上呈现并显示。我在{renderData}内返回return()。

代码：

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中添加饼图组件。我尝试了什么：

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 />)它有效，但如果我这样做 - ＆gt; 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中，甚至包含在变量/函数调用中定义的内部组件。

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

也可以使用 Fragments

来完成

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，它允许你在不添加额外div的情况下包装JSX表达式。

如果您使用的是React 16，请使用片段：

 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。

如何在渲染函数中返回多个组件？

4 个答案: