在 External js 和 React js/Redux 之间传递数据

Question

我已将 React-redux 集成到 externalJs 应用程序中（基于自定义 JS 框架构建）。我需要从 externalJS 为 redux 存储设置初始数据，但是 externalJs 无法访问反应存储来设置数据。当根 reactJS 组件安装在 DOM 上时，商店会被触发，但我需要在它安装在 DOM 上之前设置初始数据。我参考了以下链接，但他们无法解决我的问题。有人可以告诉我我错过了什么吗？

https://brettdewoody.com/accessing-component-methods-and-state-from-outside-react/

Accessing react components outside

我正在使用 webpacks，将 16.1 与 redux 反应

下面在 index.js 中给出的示例根组件结构

render() {

        return (
            <Provider store={store}>
                <Email ref={(EmailComponent) => { window.EmailComponent = EmailComponent }} />
            </Provider>
        );
    }

Answer 1

我假设您正在尝试将 EmailComponent 和“存储”公开给 DOM 和其他框架，因为您在全局 window 对象上声明它。 React.render 有一个回调作为第三个参数，您可以使用它来了解 React App 何时挂载到 DOM。

ReactDOM.render(<App />, document.getElementById('root'), function () {
  // now the root React App is mounted and the data from it will be available
  // your window.EmailComponent and window.store should now be avialable
  console.log(window.EmailComponent, window.store)

})



render() {
  window.store = store
        return (
            <Provider store={store}>

                <Email ref={(EmailComponent) => { window.EmailComponent = EmailComponent }} />
            </Provider>
        );
    }