Question

我有一个定义为

的组件

    class _MyComponent extends React.Component{
          render() {
            return (
                ...
            );
          }
    }

    const MyComponent= connect(
              store => {
                    return {
                        ...
                    };
                  }
                )(_MyComponent);
    export default MyComponent;

现在我想将它插入一个容器（一个id为“容器”的div）

ReactDOM.render(<div>{React.createElement(MyComponent)}</div>, document.getElementById("container"))

我得到了

Uncaught Error: Could not find "store" in either the context or props of "Connect(_MyComponent)".

如何将Redux存储传递到组件“MyComponent”？

感谢

coolshare

Answer 1

您缺少通过上下文提供商店的提供商。这基本上就是错误信息告诉你的内容。

查看文档：{{3}}

ReactDOM.render(
  <Provider store={store}>
    <MyRootComponent />
  </Provider>,
  rootEl
)

所以你要做的就是用提供者包装MyComponent。提供商需要商店。创建该商店也是您的责任。 https://github.com/reactjs/react-redux/blob/master/docs/api.md#vanilla-react

Answer 2

根据documentation的标准方法是将_MyComponent包裹在Provider内，如下所示：

import { Provider } from 'react-redux';
import { createStore } from 'redux';

const store = createStore(/* reducers here */);

// .._MyComponent definition

// Render to the DOM
ReactDOM.render(
  <Provider store={store}>
    <_MyComponent />
  </Provider>
, document.getElementById("container"))

然后，您可以使用connect中的react-redux方法访问商店。

如何将Redux存储传递给React.createElement创建的组件

2 个答案: