Question

我正在使用reactJS和mobx创建一个Web应用程序，我对如何重用我的组件有一些疑问，这是最有效的方法。我的问题是我有许多组件，他们共享许多其他相同的组件。例如，我有一些页面，如（Home，About，Help等），它们作为组件分开，它们还分别包含Header，Footer和Content组件（Header和Footer是有状态组件，因为用户可以更改语言），但对于我的网站，每个页面都有相同的页眉和页脚，因此每个页面都会导入并呈现相同的页眉和页脚。我的问题是，如果这是一种有效的方式，或者还有其他一些方法，比如在某些地方保留页眉和页脚组件，并且在某种程度上只更改内容而不是每次都导入页眉和页脚？

Answer 1

你可以有一个“Layout.jsx”组件，它有你的页眉和页脚，以及一个可互换的内容组件，它将根据你所在的路线在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>
  )
}

ReactJS以及如何重用共享组件

1 个答案: