Как унаследовать компонент в React и изменить его?

Question

[mr_drinkens]

Всем привет.
Использую React, Redux и React-router-redux. Имеется базовый контейнер MainContainer, который рендерит хедер, футер и левое меню. Также, вверху есть кнопка "Календарь", при нажатии на которую юзер попадает в свой календарь. Как правильно унаследовать MainContainer, сохранив верхнее все статичные элементы (хедер, футер, левое меню)?
Грубо говоря, необходимо при клике на различные элементы меню менять только основную часть.
Спасибо.

Answer 1

[Александр]

В Реакте не бывает случаев, когда наследование компонентов оправдано. Об этом подробно написано в официальной документации

At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.

Контент должен прокидываться через this.props.children компонента MainContainer, его рендер должен возвращать что-то вроде этого:

<div>
  <Header />
  <Menu />

  <div className="content">
    {this.props.children}
  </div>

  <Footer />
</div>

Использование:

<MainContainer>
{/* Контент */}
</MainContainer>

Comments

[mr_drinkens]

Благодарю за ответ. Да, получается что-то вроде "обертки" основного (default) компонента.