動態添加React組件

Question

背景 ：我已經使用ES6使用React，Redux創建了一個可運行的應用程序。 Webpack用作CommonJS模式的捆綁器。

必需 ：我創建了另一個包含react組件的文件。 現在，我想基於一些全局參數值來切換組件。 我在render方法中添加了if條件。 請參考下面的代碼-

const LPage = () => {   
    let resource = window.keys;

    if(window.switchComponent == 0)
    {
        return (
            <div className="container containerHome">       
            <div className="col-xs-12 col-sm-12 text-center">
                <a className="logo spriteMobile"></a>
            </div>
            </div>
        );
    }
    else
    {
        return window.AnotherComponent(); 
    }    
};

對於無狀態組件，這很好用。 我必須寫這樣的東西才能使用外部組件。

window.React = React;
window.ReactDOM = ReactDOM;

現在，我無法以這種方式替換有狀態組件。 他們必須采取行動並更新商店。 有什么方法可以使用一些外部javascript替換/切換這些有狀態的組件嗎？

Answer 1

首先， window.AnotherComponent()並不是在React中實例化組件的方式。 正確的方法是return <window.AnotherComponent /> 。 如果需要傳遞屬性，也可以執行以下操作： return <window.AnotherComponent foo={true}/>

現在，按照您的方式進行操作非常不像反應。 一次，如果window.switchComponent的值發生更改，則不會重新渲染您的組件，因為React無法知道組件的狀態已更改。 還有其他方法可以在組件樹中提供全局配置值，例如在Redux存儲中設置它們（無論如何，您已經設置了它們）。