无法将 redux 存储连接到 sematic ui 调光器组件

Question

我正在使用带有语义-ui-react 库的 React。问题是当我使用 semantic-ui Dimmer 并尝试将其中的组件连接到 redux 时，我收到错误：Uncaught Invariant Violation: Could not find "store" in the context of "Connect(myComp)"。我设法通过像这样将内部组件包装在 Provider 中来克服这个错误：

import { Dimmer } from 'semantic-ui-react'
import { Provider } from 'react-redux'
import store from '../storelocation/store'
import SubComp from './subComp'

class App extends React.Component{
    render(){
        return(
            <div>
                <Dimmer>
                    <Provider store={store}>
                        <SubComp/>
                    </Provider>
                </Dimmer>
            </div>
        )
    }
}

这样做，我的 SubComp 现在可以 connect(mstp,mdtp)。

此类问题未出现在应用程序的任何其他部分。我已经将我的根组件包装在我的 index.js 中的 Provider 中，如下所示：

ReactDom.render(
    <Provider store={store}>
        <App/>
    </Provider>, document.getElementById('root')
);

现在，自从每次使用我的 SubComp 时都将它包装在提供者中，我脸上的笑容消失了，我正在寻找一个更好的选择，如果我在这里做错了什么，也许可以纠正。 tnx.

Answer 1

这里出现问题是因为 Semantic-UI-React 使用 React Portals 组件，如 Modal、Confirm、Dimmer、Popup 等

有关Portals的更多信息以及出现此问题的原因，您可以参考评论。

不幸的是，到目前为止，似乎没有比通过提取存储（正如您所做的那样）使用 Provider 将您自己的组件包装在 Portal 下更好的方法了。

无法将 redux 存储连接到 sematic ui 调光器组件

Can't connect redux store to sematic ui dimmer components

reactjs

semantic-ui

redux