ReactJS, передавая опору от родительского к дочернему компоненту?

Question

У меня есть куча компонентов, которым требуется одна и та же реквизит, и проходить их по отдельности, чтобы добавить JSX, сложно, могу ли я создать фрагмент JSX в родительском компоненте, который будет передан этим дочерним компонентам в качестве реквизита?

Вот в основном то, что я хочу сделать:

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}/> и в вашей функции renderСтраница MyComponent, вы можете просто использовать {this.props.header} для загрузки вашего компонента.Это можно повторить для любого количества компонентов.

Редактировать на основе комментариев.В этом случае я бы обернул компонент в функцию.Например:

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

Теперь в вашей функции рендеринга вы можете вызвать getCustomHeader.

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

.