javascript - 在 React + Redux.js 应用程序中，在 Provider 组件之外操作 DOM 元素的正确方法是什么？

Question

我正在创建一个 React + Redux 原型(prototype)应用程序，我面临着一种情况，我想在 Provider 组件之外操作 DOM。

我的 React + Redux 应用程序中有一个根组件:

class App extends Component {

  render() {

    return (
      <div>
        <Provider store={store}>
          <Main />
        </Provider>
        <DebugPanel top right bottom>
          <DevTools store={store} monitor={LogMonitor} />
        </DebugPanel>
      </div>
    )
  }
};

我在 Main 中有一个按钮，我想用它来隐藏 DebugPanel。因此，我想操作 DebugPanel 组件类或其上方的任何元素。

这让我产生以下问题:

• 如何操作 DebugPanel className？
• 如何操作 Provider 组件外部的 DOM 元素(例如 body 或 html 标记)？
• 是否只能在 Provider 内部监听存储状态更改，还是我误解了？
• 所有这些都可以通过一点 jQuery 来解决。我可以将其放入商店，但这会是一个有效的解决方案吗？
• 什么是“纯 Redux”方法？

如果你想看一下代码，可以在我的 git 上找到: https://github.com/JaakkoKarhu/redux-react-blockgenerator

抱歉，如果代码有点困惑，我现在可能会讲很多废话。

我希望这个问题不要太宽泛，我正在寻找一种“最佳实践”类型的方法。

编辑:

编辑整个问题以更好地描述令我困惑的事情。

Answer 1

首先:看起来你的代码是你的 React.render() 函数。最佳实践是仅调用此函数一次，以安装您的 react 代码。首先:将初始渲染更改为:

React.render(
  <Main/>,
  document.getElementById('main')
);

并将所有其他内容放入完整的 react 组件中。

关于你真正的问题:直接的方法:

• 将类名放入根组件的状态中。
• 在根组件中添加一个更新状态的函数。
• 将此函数作为 prop 传递给您的组件。

当在应用程序组件中单击按钮时，根状态会发生变化，DevTools 将使用新类重新呈现。

您的根组件代码将包括:

getInitialState() {
  return { devToolsClassName : 'dev-hidden' };
}

onClickInApp() {
  this.setState({ devToolsClassName : 'dev-visible' });
}

main 中的渲染函数看起来包含以下更改:

...
      <App clickHandler={this.onClickInApp}/>
...
      <DevTools className={this.state.devToolsClassName} store={store} monitor={LogMonitor} />

在你的内部，你将有一个函数(绑定(bind)到按钮点击)，例如:

_onClick() {
  this.props.onClickInApp()
}

这可行，但是子进程调用父进程内部函数的部分可以说是一种反模式(尽管对此的看法各不相同)。

另一种选择:纯助焊剂的方法:

• 将 showDevTools bool 值放入存储中。
• 让您的根组件在每次商店更改时从商店获取它。
• 这也会触发重新渲染。