Question

我还是React的新手，但面临一个奇怪的问题。实际上，我正在为一个现有项目的阿拉伯语从右到左进行主题翻译，该项目也在React中使用服务器端渲染。场景是，我们有自己的React Component's Library，将在主项目中使用它。该组件库可以通过ThemeProvider访问“主题”对象。我已经在主题中放置了一个名为“ textDirection”的键，现在我希望我的组件库根据该主题动态更改某些CSS属性。textDirection之类的 textAlign: (theme.textDirection==='rtl'?'left':'right'). 加载，但是当用户选择另一种语言形式的语言下拉菜单时，我正在分派redux存储操作以修改theme.textDirection，但现在对于客户端，我的库组件未重新呈现。

在Main Project的客户端，我从redux商店设置主题提供程序。

hydrate(
  <ThemeProvider theme={store.getState().config.theme}>
    <Provider store={store}>
      <App />
    </Provider>
  </ThemeProvider>,
  document.getElementById('app'),

现在，即使更改redux存储theme.textDirection，组件库也将获得相同的主题对象，否则将不会重新渲染。可能是我做错了或我的方法不正确，在这种情况下，任何人都可以帮助我。

注意：我想清除，Main Project正在使用React Component库，该库具有通过ThemeProvider提供的主题对象。现在，当Main Project中的用户从Language Dropdown中选择一种新语言时，我想更改Components Library CSS。

Answer 1

确保您确实在更改主题。从您的角度看，好像您正在更改它，但是从ThemeProvider来看，它可能有所不同。它可能会比较主题，并且如果没有更改，则不会重新渲染。因为主题是对象，所以将通过引用对其进行比较...如果您不具有不变的结构，那么即使对象具有不同的道具，您也将具有相同的引用。.

尝试一下：

<ThemeProvider theme={{ ...store.getState().config.theme }}>
...
</ThemeProvider>

这将使主题每次都成为新对象-请注意，只要您将ThemeProvider放在顶层，就可以了，否则这可能会导致性能问题...

将提供的值更改为ThemeProvider不会导致组件在React中重新渲染

1 个答案: