Question

我有React组件使用Redux Store。在componentDidMount中，此组件还应将其他组件添加到iframe中。此iframe是独立的，不是在组件代码中创建的。

<iframe src="empty.html"></iframe>

componentDidMount(){
    let iframe = document.querySelector('iframe');
    let iframeBody = iframe.contentWindow.document.body;
    let el = iframe.contentWindow.document.createElement('div');
    iframeBody.appendChild(el);
    ReactDOM.render(<ReactRedux.Provider store={store}><SkCanvas /></ReactRedux.Provider>,iframeBody.querySelector('div'));
  }

此代码不会抛出任何错误。在新组件SkCanvas中console.log带有道具，此日志显示在我的控制台中。只是HTML代码，它在iframe中可见。当然，如果我尝试将此组件添加到iframe之外的任何元素，它都可以。

任何提示如何在那里添加？

也可以手动将此组件设置为ifrmae（在init上），但我需要在这些组件之间共享存储。

提前感谢任何提示。

Answer 1

React不会在context之间保留ReactDOM.render()。因此，如果您使用2个单独的store，则iframe不会在ReactDOM.render()之外的组件和内部之间共享。通常，如果要在任何HTML元素内呈现组件，可以使用以下模式。

您的HTML元素：

<iframe id='iframe1'></iframe>

然后是js文件：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';

const store = configureStore();

class SkCanvas extends Component {
  render() {
    .
    .
    .
  }
}

class FrameApp extends Component {
  render() {
    return (
      <Provider store={store}>
        <SkCanvas/>
      </Provider>
    );
  }
}

ReactDOM.render(
  <FrameApp/>,
  document.getElementById('iframe1')
);

编辑：要将React app渲染为iframe，您可以使用react-frame-component。此库确保Redux商店也可以在iframe中使用。另请参阅https://github.com/ryanseddon/react-frame-component/issues/29

将Redux组件的React附加到iframe

1 个答案: