Question

我目前正在通过使用react-router（v4.1）进行路由的Web项目学习React（v15.6）。高级目标是：在渲染相应路线时更改网站的主题。

例如，当用户转到/giraffe时，我希望使用Theme Giraffe;当用户转到/rhino时，我想使用Theme Rhino。

我采取了几种方法，每种方法都有效，但有一些次优的妥协。我的问题是：实现这一目标的最反应方式是什么？

这是我到目前为止所尝试过的，以及为什么我犹豫不决地使用它们。对于两者，我的应用程序呈现以下内容：

<Page>
  <Route exact path='/' />
  <Route exact path='/giraffe' />
  <Route exact path='/rhino' />
</Page>

图表A：使用州

我的第一直觉是去州。也就是说，将App的状态设置为具有一些主题并将该主题传递给渲染上的<Page>组件：

<Page className={`theme-${this.state.theme}`}>

很酷，但我在哪里设置状态？它需要在呈现新路由时发生，因此我使用路由执行以下操作：

<Route exact path='/giraffe' render={() => this._renderWithTheme('giraffe', Giraffe)} />
// ...
_renderWithTheme(newTheme, component) {
  if(this.state.theme !== newTheme)
    this.setState({ theme: newTheme });
  return React.createElement(component);
}

问题：即使这样可行，也需要在渲染步骤中更改状态。 React打印了大量关于此的警告，加上整个事情需要渲染两次（一次用于新路线，一次用于新状态）。

图表B：路线呈现页面

接下来的想法是使用Route的渲染器渲染<Page>而不是将其渲染到路径上方，如下所示：

<Route exact path='/giraffe' render={() => this._renderWithTheme('giraffe', Giraffe)} />
// ...
_renderWithTheme(newTheme, component) {
  const className = `theme-${newTheme}`;
  const child = React.createElement(component);
  return <Page className={className}>{child}</Page>;
}

问题：这次没有警告，但导航变得有点不稳定。问题是，由于渲染新路线现在重新渲染页面，因此重新渲染整个页面，包括页眉和页脚等静态元素。但是，只需要更新页眉和页脚之间的内容，因此，当我只想更改单个类名时，最好重新呈现所有内容。

目标：在渲染相应路线时更改网站的主题。

问题：实现此目标的最Reacty方法是什么，而无需在渲染步骤中重新渲染整个页面或更改状态？

如果我需要澄清一些事情，请告诉我！

Answer 1

你可以使用Redux来实现这个目标，我知道这不是技术上的，而是＃24; Reacty＆＃34;。 React和Redux一起玩得非常好。

使用Redux，您可以创建所谓的商店，您可以在其中存储可以连接到任何需要该数据的React组件的数据。

您可以创建一个Redux商店，您可以在其中定义（并且用户可以更改）主题设置并将其连接到您的页面组件，该组件可以根据所选主题进行不同的渲染。

您甚至不需要单独的路线来完成此任务。

查看Redux docs了解详情。虽然它看起来像很多（它是一个完全不同的动物（得到它？）而不是React）但它是一个很棒的工具，我强烈推荐它。您可能还会在应用中找到许多其他用途。

渲染新路线时更改网站主题

图表A：使用州

图表B：路线呈现页面

1 个答案: