哪些是将许多道具附加到子组件的最佳选择？

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的接口改为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 中传递道具。它将与其余的道具相结合。

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