使用无状态功能组件在react-redux中创建模态

Question

我们正在React-Redux中实现一个应用程序，其中包含无状态功能组件和容器，用于需要处理状态的应用程序。我们的想法是将所有信息都存储在Redux商店中。

在应用程序中，我们需要在几个地方显示不同的模态窗口。我已经在堆栈溢出中查看了这里的文章，但我无法使其工作。我遵循了Dan Abramov在this post描述的过程。

我的主要问题是我应该在我的应用程序中渲染我的ModalRoot组件。该过程如下：

我有一个按钮，调度动作displayModal以显示模态... clickHandler：modalProps =>（dispatch（displayModal（'MODAL_1'，modalProps））export function displayModal（modalType，modalProps）{return {type：DISPLAY_MODAL，payload：{modalType，modalProps}};}
然后该操作由reducer处理，该reducer将modalType属性设置为redux-state ... export default function（modal = Map（），action）{if（！action）{return modal; } switch（action.type）{case DISPLAY_MODAL：return modal .set（'modalType'，action.payload.modalType）.set（'modalProps'，action.payload.modalProps）;默认值：return modal; }}
然后我有ModalRootContainer将状态传递给我的ModalRoot组件...... const mapStateToProps = state =>（{modalType：modalState（state）.get（'modalType'），modalProps：modalState（state）.get（'modalProps'）}）; const ModalRootContainer = connect（mapStateToProps）（ModalRoot）; export default ModalRootContainer;
ModalRootComponent如下： const ModalRoot =（modalType，modalProps）=> {if（！modalType）{return＆ltspan />; } switch（modalType）{case'MODAL_1'：return＆ltMyComponent {... modalProps} />;默认值：return＆ltspan />; }}; ModalRoot.propTypes = {modalType：PropTypes.string，modalProps：PropTypes.object};导出默认ModalRoot;

我的理解是这是正确的，但它不起作用。 ModalRoot应该放在哪里？在Provider标签内？我错过了什么？

编辑1：我试图使用随机用户在下面的答案中说的没有效果。所以我在我的index.html：

<body>
<div id="modals"></div>
<div id="root"></div>
</body>

在我的main.js中：

ReactDOM.render(
      <Provider store={store}>
        <Router history={hashHistory}>{routing(store)}</Router>
      </Provider>,
      document.getElementById('root')
    );
    ReactDOM.render(
      <Provider store={store}>
        <ModalRootContainer />
      </Provider>,
      document.getElementById('modals')
    );

并且通过以上所有设置仍然没有显示模态。我调试，我看到操作被触发，状态从reducer更新。有没有办法在这一点之后调试以查看我的容器是否有问题以及为什么模态没有显示？

编辑2：我发现了什么问题。我错误地把状态传给了我的容器。代码似乎工作，但现在，而不是有一个模态窗口显示，我有我的组件（应该在模态内）出现在我的剩余页面上方。我只是渲染一个简单的文本“关闭模式”和一个关闭它的按钮。它被正确显示和隐藏，但它不能作为模态，它只是显示和隐藏。对我失踪的任何帮助？

Answer 1

你应该在当前的ModalRootContainer中渲染Provider。你可能有一些app.js文件与<Provider> ... </Provider>里面。这是您应该渲染容器的地方。

这是因为redux通过背景分享状态（https://facebook.github.io/react/docs/context.html）。 Provider是一个创建该上下文的组件，并且感谢connect，你有它的数据在道具中。因此，要访问state，必须将所有容器渲染为Provider组件的子/孙子/ ....

Answer 2

你已经声明了ModalRootComponent但实际上使用它你必须在你的应用程序中的某个地方呈现它。我的意思是渲染是把它放在内部反应ReactDOM.render(...)功能。

当你使用redux时，渲染函数通常看起来像这样，Provider标记在所有内容之上：

ReactDOM.render(
  <Provider store={store}>

    ...

  </Provider>,
  document.getElementById('root')
);

你可以做些什么来渲染ModalRootContainer组件只是将它放在Provider标签内，如下所示：

ReactDOM.render(
  <Provider store={store}>

    <ModalRootContainer />

  </Provider>,
  document.getElementById('root')
);

但是在更复杂的情况下，您可以在这里渲染路由器，然后在每条路径中实际执行内容：

ReactDOM.render(
  <Provider store={store}>

    <Router history={history}>
      {routes}
    </Router>

  </Provider>,
  document.getElementById('root')
);

还要确保您已正确设置redux存储，并且它知道您的减速器。你可以看到react和redux here的工作todo示例。

使用无状态功能组件在react-redux中创建模态

问题描述投票：1回答：2

2个回答

最新问题

使用无状态功能组件在react-redux中创建模态

问题描述 投票：1回答：2

2个回答

最新问题

问题描述投票：1回答：2