动态添加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存储中设置它们（无论如何，您已经设置了它们）。