React 动态增加compoent

最新推荐文章于 2025-07-04 16:00:14 发布

自我还是本我

最新推荐文章于 2025-07-04 16:00:14 发布

阅读量8.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react

本文链接：https://blog.youkuaiyun.com/chinaycheng/article/details/52318092

react 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了如何在HTML页面中动态地添加React组件而不覆盖现有组件的问题。通过创建空的div元素并将其附加到DOM中，然后将新的React组件渲染到该div中，以此避免覆盖原有组件。虽然这种方法可行，但作者认为不够优雅，并寻求更佳解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

一般来说，都是用

var balabalaba = React.createClass({
    render:function() {
        return (
            <div></div>
        )
    }
})

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：正确的方法肯定不是这样做的，但是我不知道，那就先这样吧。如果有正确的方法，请告知，谢谢！