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

What is a proper way to manipulate DOM elements outside of Provider component in React + Redux.js app?

本文关键字：元素 DOM 是什么 方法 操作 应用程序 js React+Redux 组件 Provider      更新时间：2023-09-26

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

我的React+Reux应用程序中有一个根组件：

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类名
  • 如何在Provider组件之外操作DOM元素，例如body或html标记
  • 商店状态的更改只能在提供者内部听到吗？还是我误解了
  • 所有这些都可以通过一点点jQuery来解决。我可以把它放进商店，但这是一个有效的解决方案吗
  • 什么是"纯Redux"方法

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

很抱歉，如果代码有点乱，我现在可能会在那里推很多废话。

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

编辑：

编辑了整个问题以更好地描述让我困惑的地方。

首先：看起来您的代码就是React.render（）函数。最佳实践是只调用此函数一次，以装载您的react代码。因此，首先：将初始渲染更改为：

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

把所有其他的东西放在一个完全反应的组件里。

至于你真正的问题：直接方法：

  • 将类名置于根组件的状态
  • 在根组件中添加一个更新状态的函数
  • 将此函数作为道具传递给组件

当点击应用程序组件中的按钮时，根状态发生变化，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} />

在你的内部，你会有一个功能（绑定到按钮点击），比如：

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

这是可行的，但child在parent内部调用函数的部分可以说是一个反模式（尽管对此众说纷纭）。

因此，替代方案：纯通量方法：

  • 在存储中放入一个showDevTools布尔值
  • 每次更改存储时，让根组件从存储中获取它
  • 这也会触发重新渲染
相关文章：