渲染新路线时更改站点主题答案

【问题标题】：Changing site theme when rendering a new Route渲染新路线时更改站点主题
【发布时间】：2017-12-18 09:58:14
【问题描述】：

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

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

我采用了几种方法，每种方法都有效，但折衷并不理想。我的问题是：实现这一目标的最 Reacty 方式是什么？

以下是我迄今为止尝试过的方法以及我犹豫是否要使用它们的原因。对于这两者，我的应用程序呈现以下内容：

<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>，而不是像这样在 Routes 上方渲染它：

<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 方式是什么？

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

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

您可以使用 Redux 来实现这一点，我知道这在技术上并不是“Reacty”。 React 和 Redux 配合得非常好。

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

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

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

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

【讨论】：