我有一个连接的组件,当用 <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
最佳答案
旧版本可以很容易地阻止通过 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>
);
}
关于redux - 无法在嵌套在对话框中的连接组件中找到 "store"错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56757015/