代码之家 › 专栏 › 技术社区 › stone rock

如何在render函数中返回多个组件?

reactjs javascript

stone rock · 技术社区 · 6 年前

我做了三个部件 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>
}

现在我想在里面添加piechart组件 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 = (<FirstComponent />) 但如果我真的喜欢这个-> renderData = (<FirstComponent /> <SecondComponent/>) 它不起作用为什么?

4 回复 | 直到 6 年前

Denis Tsoi 6 年前

…

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

Paul RonnyKnoxville 6 年前

这段代码不起作用,因为相邻的jsx元素必须包装在一个封闭的标记中。

react 16引入了片段,它允许您包装jsx表达式而不添加额外的div。

如果使用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 ...

Juorder Gonzalez 6 年前

处理这个问题的最好方法是创建一种散列表(只是一个包含多个组件的对象),这样就可以根据需要进行缩放,所以它可以是

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()}
}

如果需要返回两个组件,最好将这两个组件包装成一个组件,并将其添加到包含组件的对象(哈希表)

Lafi 6 年前

这是一个使用儿童支柱:

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

见 codesandbox Exp.