嵌套在对话框中的连接组件中找不到 "store" 错误

Question

我有一个连接的组件，当用 <div> 包装时可以很好地呈现，但是当我用 Dialog 组件包装时，我一直感到害怕：在上下文中找不到 "store" "Connect(MyComponent)"。是的，根 <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 的父组件是使用钩子异步加载的...即使替换为 react-loadable 的代码拆分机制，我也会得到同样的顽皮结果。

使用：

Material-ui 0.20.2（是的，旧的）
响应 16.8.6
Redux 4.0.1
React-redux 7.1.0
反应路由器-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>
    );
}

嵌套在对话框中的连接组件中找不到 "store" 错误

Could not find "store" error in connected component nested in Dialog

dialog

store

redux

material-ui

react-redux