ReactJS以及如何重用共享组件

Question

我正在用reactJS和mobx制作一个Web应用程序，并且对如何重用组件以及哪种方法最有效存在一些疑问。 我的问题是我有许多组件，它们共享许多其他相同的组件。 例如，我有一些页面（例如，“主页”，“关于”，“帮助”等），它们分别作为组件而分开，还分别包含一个Header，Footer和Content组件（Header和Footer是有状态组件，因为用户可以更改语言），但是对于我的网站，每个页面都有相同的页眉和页脚，因此每个页面导入并呈现相同的页眉和页脚。 我的问题是这是一种有效的方法，还是还有其他方法，例如将页眉和页脚组件保留在某个位置，并以某种方式仅更改内容，而不是每次都导入页眉和页脚？

Answer 1

您可能有一个“ Layout.jsx”组件，该组件具有页眉和页脚以及一个可互换的Content组件，该组件将根据您所在的路线在Home，About等之间进行切换。

如果您已经在使用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>
  )
}