ReactJS и как повторно использовать общие компоненты

Question

Я делаю веб-приложение с ReactionJS и MOBX, и у меня есть несколько вопросов о том, как я должен повторно использовать свои компоненты, и какой способ наиболее эффективен. Моя проблема в том, что у меня есть много компонентов, которые разделяют многие другие компоненты. Например, у меня есть несколько страниц, таких как (Домашняя страница, О программе, Справка и т. Д.), И они являются отдельными компонентами, а также соответственно содержат компоненты "Верхний колонтитул", "Нижний колонтитул" и "Содержимое" (из которых верхний и нижний колонтитулы являются компонентами с состоянием, поскольку пользователь может изменить язык), но для моего веб-сайта каждая страница имеет одинаковый верхний и нижний колонтитулы, поэтому каждая страница импортирует и отображает один и тот же верхний и нижний колонтитулы. У меня вопрос, если это эффективный способ, или есть какой-то другой способ, например, сохранить компоненты заголовка и нижнего колонтитула в каком-то месте, и изменить каким-то образом только содержимое, а не импортировать заголовок и нижний колонтитул каждый раз?

Answer 1

У вас может быть компонент "Layout.jsx", в котором есть верхний и нижний колонтитулы, а также компонент "Сменный контент", который будет переключаться между "Домой", "О программе" и т. Д. В зависимости от маршрута, в котором вы находитесь.

Если вы уже используете React Router (который я настоятельно рекомендую), вы можете добиться этого, вложив другие маршруты в маршрут для макета:

import React from "react";
import {IndexRoute, Route} from 'react-router';
import Layout from "Layout.jsx";
import Home from "Home.jsx";
import Help from "Help.jsx";
import NotFound from "NotFound.jsx";

export default () => {
  return (
    <Route path="/" component={Layout}>
      { /* Home (main) route */ }
      <IndexRoute component={Home}/>

      { /* Routes */ }
      <Route path="about" component={About}/>
      <Route path="help" component={Help}/>

      { /* Catch all route */ }
      <Route path="*" component={NotFound} status={404} />
    </Route>
  )
}