Как вывести в компонент другие компоненты, переданные как prop?

Question

[GreenMan1899]

Передаю компоненты Header и Footer в компонент Layout и хочу их вывести внутри него.
Как это правильно сделать?
Сейчас в console.log который вызывается в layout передаются функции этих компонентов, но в render ничего не появляется.

Answer 1

[Владимир Проскурин]

Header у вас является компонентом, а не элементом (экземпляром). Поэтому получая его из пропсов, вы получаете обычный компонент, который стандартным образом рисуете.

const { Header, Footer } = this.props;

return (
    <Fragment>
        <Header />
        <Footer />
     </Fragment>
);

Но лучше передавать не компонент, а render функцию https://reactjs.org/docs/render-props.html.

Comments

[GreenMan1899]

[Владимир Проскурин]

GreenMan1899, вы в App.js не поменяли регистр атрибутов header, footer в Header, Footer. Но повторю, лучше используете render функции.

Answer 2

[Антон Спирин]

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

const { header: Header, footer: Footer } = this.props;

return (
  <Fragment>
    <Header />
    <Footer />
  </Fragment>
);

Но советую вам спроектировать этот участок иначе. Со стороны не видно никакого смысла в передаче Header и Footer в виде свойств. Их лучше импортировать в файле компонента Layout.