Append Reagieren mit Redux-Komponente in iframe

Question

Ich habe React-Komponente, was Redux Store verwenden. In componentDidMount sollte diese Komponente auch eine andere Komponente zu iframe hinzufügen. Dieser Iframe ist unabhängig und wird nicht im Komponentencode erstellt.

<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')); 
    } 

Dieser Code wirft keine Fehler. In der neuen Komponente SkCanvas ist console.log mit Requisiten und dieses Protokoll wird in meiner Konsole angezeigt. Nur HTML-Code ist es in Iframe sichtbar. Natürlich, wenn ich versuche, diese Komponente zu einem Element außerhalb iframe hinzuzufügen, funktioniert es.

Irgendein Hinweis, wie kann ich es dort hinzufügen?

Es ist auch möglich, diese Komponente manuell in ifrmae (on init) zu setzen, aber ich muss Speicher zwischen diesen Komponenten freigeben.

Vielen Dank im Voraus für Hinweise.

Answer 1

React behält nicht context über ReactDOM.render(). So wird die store nicht zwischen den Komponenten außerhalb iframe und innerhalb geteilt, wenn Sie 2 separate ReactDOM.render() s verwenden.
Wenn Sie eine Komponente in einem beliebigen HTML-Element rendern möchten, können Sie das folgende Muster verwenden.

Ihr HTML-Element:

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

Dann js-Datei:

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') 
); 

Edit: Für App in und iframe Reagieren Rendering, können Sie react-frame-component verwenden. Diese Bibliothek stellt sicher, dass der Redux-Speicher auch innerhalb des Iframes verfügbar ist. Siehe auch https://github.com/ryanseddon/react-frame-component/issues/29