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

我正在创建一个React + Redux原型应用程序，我面临的情况是我想操作提供程序组件外的DOM。什么是在React + Redux.js应用程序中操作提供程序组件之外的DOM元素的正确方法？

我在我的阵营+终极版的应用程序根组件：

class App extends Component { 

    render() { 

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

我主内一个按钮，我想用隐藏的DebugPanel。出于这个原因，我想操纵DebugPanel组件类，或者它上面的任何元素。

这使我以下的问题：

我将如何操作DebugPanel的className？
如何操作Provider组件外部的DOM元素，例如body或html标签？
商店状态更改只能在提供商内部收听，还是我误解了？
所有这些都可以用一点jQuery解决。我可以把它放到商店里，但那会是一个有效的解决方案吗？
什么是“纯正的Redux”方法？

如果你想看看代码，它可以在我的git发现： https://github.com/JaakkoKarhu/redux-react-blockgenerator

很抱歉，如果代码是有点乱，我可能会推有一个在很多废话此时此刻。

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

编辑：

编辑整个问题来更好地描述什么使我困惑。

来源

2015-10-28 Jaakko Karhu

首先：它看起来像你的代码是你的React.render（）函数。最佳做法是只调用一次该函数，以安装您的反应代码。所以首先：改变你的初始渲染为：

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

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

至于你真正的问题： 直接的方式做到这一点：

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

当App组件中的按钮被点击时，根状态会改变，DevTools会被重新渲染为新类。

你的根组件的代码将随后包括：

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

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

内主要会看包括以下更改渲染功能：

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

里面你，你将有一个函数（绑定到按钮点击）像：

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

这将工作，但儿童的部分在父类中调用一个函数可以说是一种反模式（尽管对此的看法各不相同）。

所以选择：纯流量的方式来做到这一点：

将一个showDevTools布尔在商店里。
让您的根组件从每个商店更改的商店中获取它。
这也会触发重新渲染。

来源

2015-10-28 12:50:20 wintvelt

改变了初始渲染的建议。但是我不完全明白你的答案，可能是因为我注意到我的问题也有点不清楚。我正在寻找一种“纯正的Redux”方式来做到这一点，如果有的话。 –

我编辑了整个问题，以更好地描述出什么错误。对不起，如果你的答案不再适用，麻烦。 –

您的一组问题仍然多样化，并不总是很清楚：“外部提供商”包括''（位于您的应用范围内）和''（位于您的应用范围之外）。最佳方法有很大差异。但无论如何，我对redux并不熟悉，所以希望其他人可以在这里提供更有帮助的答案。 – wintvelt

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

回答

相关问题