在对话框中嵌套的连接组件中找不到“存储”错误

Question

我有一个连接的组件，当用 a 包装时可以正常渲染<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>，一切正常。

不确定这是否相关，但是包装对话框的父组件是用钩子异步加载的......即使替换为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>
    );
}