ReactJS，将道具从父组件传递给子组件？

Question

我有一堆组件需要相同的 prop，并且单独通过它们添加 JSX 很麻烦，我可以在父组件中创建一个 JSX 将作为 prop 传递给这些子组件吗？

这基本上是我想做的：

function App(props) {
    /*not part of the actual code, but I want to 
    pass this h1 tag into the  bottom components as a prop*/
    <h1>{props.heading}</h1> 
    <Home heading="Home"/>
    <AboutMe heading="About Me"/>
    <Contact heading="Contact"/>
}

我知道上面的代码不是你应该做的，但是有什么方法可以实现这个功能吗？

Answer 1

是的，这是可能的。只需将您的 JSX 组件分配给一个变量并将该变量作为道具传递。你有正确的想法。 例如：

var customHeader = <h1>Here's a custom component</h1>

您还可以将customHeader 设置为 React 组件，例如：var customHeader = <CustomHeader />

您可以通过<MyComponent header={customHeader}/> 并在MyComponent 页面的render 函数中，您可以简单地使用{this.props.header} 来加载您的组件。可以对任意数量的组件重复此操作。

基于 cmets 进行编辑。在这种情况下，我会将组件包装在一个函数中。例如：

getCustomHeader = (title) => {
    return <MyHeader
        headerTitle={title}
    />
}

现在，在您的渲染函数中，您可以调用getCustomHeader。

render() {
    return <div>
        <MyComponent1 header={this.getCustomHeader("Title A")} />
        <MyComponent2 header={this.getCustomHeader("Title B")} />
    </div>
}