哪个是最好的选择，以将许多道具附加到子组件？

问题描述：

使用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> 
    ); 
    } 
}

哪种方法可以做到这一点？

答

您可以使用对象传播语法通过道具JSX。它将与道具的其余部分相结合。

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

我的错误，我只是更新我的问题。 –

我不明白你真正想达到什么目的，如果你需要单独的道具来逐个传递，我不认为有这么简单的方法。 –

我会说，在TemplateAbout的每个子元素中，从'TemplateAbout'和'contextType'使用'getChildContext'可以做到这一点。每次getChildContext变化返回一个不同的对象时，你可能不得不重新渲染所有的孩子。（待证实，也许'componentWillUpdate'具有相同的上下文）。 @EvanSebastian这是你想到的困难方式吗？ – BigDong

哪个是最好的选择，以将许多道具附加到子组件？

相关推荐