ReactJS 以及如何重用共享组件

Question

我正在使用 reactJS 和 mobx 制作一个 Web 应用程序，我对如何重用我的组件以及哪种方式最有效有一些疑问。 我的问题是我有许多组件，它们共享许多其他相同的组件。例如，我有一些页面（如 Home、About、Help 等），它们作为组件是分开的，它们还分别包含一个 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>
  )
}