redux - 无法在嵌套在对话框中的连接组件中找到 "store"错误

Question

我有一个连接的组件，当用 <div> 包裹时，它会很好地渲染，但是当我用 Dialog 组件包装时，我一直感到害怕:在“Connect(MyComponent)”的上下文中找不到“store”。是的，根 <App />用 <Provider /> 包裹并且商店很好，所有其他页面、组件、连接的项目都可以访问商店，只是在这个对话框中呈现时没有。

这在过去不是问题，并且显然是作为正在发生的某些依赖项维护的副作用而解决的。如果我将 Dialog 组件的底层库从 MUI 0.20 交换到版本 3(通过 @material-ui/core/Dialog)，它工作正常。在 mui 0.20 和更新的 react-ish 依赖项之间取得平衡。

不知道有没有人遇到过这种情况？

// Where it's invoked...

<ParentPageComp>
  <Dialog open>
    <MyConnectedComponent />
  </Dialog>
</ParentPageComp>

// What is being attempted to render...

class MyConnectedComponent extends React.Component {
  render() {
    return <div>Yeppers</div>;
  }
 }

export default connect(state => ({ blah: state.blah }))(MyConnectedComponent);

同样，如果我替换 <Dialog>与 <div> , 一切正常。

不确定这是否相关，但是包装 Dialog 的父组件是使用钩子(Hook)异步加载的...即使替换为 react-loadable 的代码拆分机制，我也会得到同样的顽皮结果。

使用:

• Material-ui 0.20.2(是的，旧的)
• 响应 16.8.6
• 终极版 4.0.1
• React-redux 7.1.0
• React-router-dom 5.0.0

Answer 1

旧版本可以很容易地阻止通过 DOM 层次结构的上下文传播。您可以手动将上下文传递给 <Dialog/>这样的组件

import { Provider, ReactReduxContext } from 'react-redux';

//...
render() {
    return (
        <ParentPageComp>
            <ReactReduxContext.Consumer>
                {((ctx) => (
                    <Dialog open>
                        <Provider store={ctx.store}>  /* make store available again */
                            <MyConnectedComponent />
                        </Provider>
                    </Dialog>
                )).bind(this) // Dont forget to bind this
                }
            </ReactReduxContext.Consumer>
        </ParentPageComp>
    );
}