Question

我有一个React组件，只在HTML文档的一小部分上呈现HTML。

在React组件中，我需要用一个HTML块替换组件外部的元素。

无论我在谷歌上搜索多少，我找不到直接的方法来实现这一点，我认为这是因为React的指导方针自然规定使用ref代替。

如何使用document.getElementById()或类似内容在某个div的位置插入以下示例HTML块：

<div>
    <div class='yellow'>YELLOW</div>
    <div class='green'>GREEN</div>
    <div class='blue'>BLUE</div>
</div>

Answer 1

将id分配给html react渲染的顶级元素。它仍将包含id属性，因此仍可以使用document.getElementById

进行引用

<div id="toReplace">
    <div className="yellow">YELLOW</div>
    <div className="blue">blue</div>
    <div className="red">red</div>
</div>

componentDidMount() { //or wherever
    document.getElementById('toReplace').append('more html');
}

Answer 2

const str = "<div><div class='yellow'>YELLOW</div><div class='yellow'>GREEN</div><div class='yellow'>BLUE</div></div>"
document.getElementById('toReplace').innerHTML = "";
document.getElementById('toReplace').insertAdjacentHTML( 'beforeend', str );

在React组件外部操作dom元素

2 个答案: