Reactjs 如何将相同的道具正确地传递给多个组件？

我有一个基于道具的组件，用几乎相同的道具渲染另一个组件，如下所示：

render() {
  return(
    <Component>
      {this.renderComponent()}
    </Component>
  )


renderComponent() {
  switch (condition) {
    case "A": {
      return (
        <ComponentA
         many={...}
         same={...}
         things={...}
         oneDifferentProp="A"
        />
    }
    case "B": {
      return (
        <WrapperComponent>
          <ComponentB
           many={...}
           same={...}
           things={...}
           oneDifferentProp="B"
          />
          <SomethingOther>
        </WrapperComponent>
      )
    }
  }
}

render（）{
返回(
{this.renderComponent（）}
)
renderComponent（）{
开关（条件）{
案例“A”：{
返回(
}
案例“B”：{
返回(
)
}
}
}

那个么，我该如何使它美观、可扩展、易于阅读呢？

您可以利用这里

renderComponent（）{
//根据需要创建/传递此对象
让sharedProps={many:1，same:2，things:3}；
开关（条件）{
案例“A”：
返回(
)
案例“B”：
返回(
)
}
}

renderComponent() {
  // Create/pass in this object however you want
  let sharedProps = { many: 1, same: 2, things: 3 }; 

  switch (condition) {
    case "A":
      return (
        <ComponentA
         oneDifferentProp="A"
         {...sharedProps}
        />
      )
    case "B":
      return (
        <WrapperComponent>
          <ComponentB
           oneDifferentProp="B"
           {...sharedProps}
          />
          <SomethingOther />
        </WrapperComponent>
      )
  }
}