追加Reduxコンポーネントとiframeに対応

Question

Reduxストアを使用するReactコンポーネントがあります。 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

リアクトはcontextを超えてReactDOM.render()を保持しません。したがって、storeは、iframeの外部のコンポーネントと2つの別の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') 
); 

編集：にアプリを反応させ、iframeのレンダリングのために、あなたは​​を使用することができます。このライブラリは、Reduxストアがiframe内でも使用可能であることを保証します。参照：https://github.com/ryanseddon/react-frame-component/issues/29