在React组件之外操纵dom元素

Question

I have a React component that renders HTML only on a small part of a HTML document.

From within the React component I need to replace an element, that exist outside the component, with a block of HTML.

No matter how much I'm googling this, I cannot find a straight way to accomplish this, I assume that it's because React's guidelines that naturally prescribe to use ref instead.

How would I use document.getElementById() or anything similar to insert the following sample HTML block at the place of a certain div:

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

Answer 1

Assign an id to the top level element of the html react renders. It will still include the id attribute and thus can still be referenced with 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 );