將Redux組件添加到iframe中的反應

我有React組件使用Redux Store。在componentDidMount中，此組件還應該將其他組件添加到iframe中。此iframe獨立不在組件代碼中創建。將Redux組件添加到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上），但我需要在這些組件之間共享存儲。

在此先感謝您的任何提示。

來源

2017-10-13 jaroApp

_此代碼不會引發任何錯誤。在新的組件SkCanvas是console.log與道具和這個日誌顯示在我的控制檯。只要html代碼在iframe中可見即可。你能更精確嗎？你想追加哪些組件？ console.log的o/p是什麼？ – Dane

''由其他組件附加到iframe中。在SkCanvas中是'console.log（道具）'，這個日誌是可見的。但是html在iframe中不可見。通常只有一件事是我需要的是使用分離的CSS樣式代碼indise iframe和外部。 – jaroApp

這是_other component_？這個'componentDidMount'屬於哪個組件？ – Dane

反應並不保留context橫跨ReactDOM.render()。因此，store不會在iframe之外的組件之間共享，如果您使用2個獨立的ReactDOM.render() s，組件之間也不會共享store。
通常，如果要在任何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

來源

2017-10-13 07:05:05 Dane

感謝您的回答。用你的例子。我需要在標準'div'中渲染''。 iframe中只有''。我可以使用'FrameApp''

some

'但它不起作用。我的目標是：使用一個商店，我可以使用''。 'FrameApp'中嵌套元素的一部分應該放在iframe之外，另外一個''應該放在iframe裏面，因爲我需要將畫布和CSS樣式分開，而我用它來放置其他元素。 – jaroApp

看到我更新的答案，並檢查圖書館是否解決了問題 – Dane

它看起來很有效。我需要檢查商店是否也在父組件中更新，以便在iframe中進行操作，但現在它運行良好。謝謝。 – jaroApp

將Redux組件添加到iframe中的反應

回答

相關問題