javascript - 将许多 Prop 附加到子组件的最佳选择是什么？

Question

使用 react 15.5.4

我有一个组件已配置为在其子组件中交叉 props。

export default class Component extends React.Component {

  render() {
    return (
      <TemplateAbout
        header={{
         title: 'WHY US',
         description: 'Our Team Member share the same Vision',
        }}
      />
    );
  }
}

我想将 Component 的接口(interface)更改为 NewComponent，如下例所示。

export default class NewComponent extends React.Component {

  render() {
    return (
      <TemplateAbout>
        <Header title="WHY US" description="Our Team Member share the same Vision" />
      </TemplateAbout>
    );
  }
}

最好的方法是什么？

Answer 1

您可以使用对象扩展语法在 JSX 中传递 props。它将与其他 Prop 结合使用。

 render() {
    const header = {
      title: 'WHY US',
      description: 'Our Team Member share the same Vision',
    }
    return (
      <TemplateAbout>
        <Header otherProps="otherValue" {...header} />
      </TemplateAbout>
    );
  }
}