React 动态增加compoent

动态向HTML页面中添加组件。

一般来说,都是用

var balabalaba = React.createClass({
    render:function() {
        return (
            
) } }) var new_compoent = React.createElement(balabalaba); ReactDOM.render(new_compoent, document.getElementById("body"));

这样的问题时,如果需要添加多个com就会出现覆盖问题,因为ReactDOM会将new_compoent覆盖掉父组件原有的组件。
如果此时用
document.getElementById("body").append(new_compoent)
同样也有问题,因为new_compoent目前还没有渲染,无法添加到DOM中。

为了解决上述问题,想了一个极其愚蠢的方法,那就是用append添加一个空的div,然后再将new_compoent渲染到这个空的div中。能够解决问题,但是依然感觉很蠢。

var newDIV = document.createElement('div');
var desktop = document.getElementById('body');
desktop.appendChild(newDIV);
ReactDOM.render(new_compoent, newDIV);

PS:正确的方法肯定不是这样做的,但是我不知道,那就先这样吧。如果有正确的方法,请告知,谢谢!

你可能感兴趣的:(react)