Question

我正在将React和语义UI反应库一起使用。问题是，当我使用语义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

之所以会出现此问题，是因为语义UI响应将React Portals用于Modal，Confirm，Dimmer，Popup等组件。

有关门户网站以及发生此问题的原因的更多信息，您可以参考this注释。

不幸的是，到目前为止，似乎没有比通过提供者通过提取存储来将自己的组件包装在具有提供者的Portal下更好的方法了。

无法将Redux Store连接到Sematic UI调光器组件

1 个答案: