DOM-Element außerhalb manipulieren React-Komponente

Question

Ich habe eine React-Komponente, die HTML nur auf einem kleinen Teil eines HTML-Dokuments rendert.

Innerhalb der React-Komponente muss ich ein Element, das außerhalb der Komponente vorhanden ist, durch einen HTML-Block ersetzen.

Egal, wie viel ich googlen, kann ich keinen geraden Weg finden, dies zu erreichen, ich nehme an, dass es ist, weil React's Richtlinien natürlich vorschreiben, stattdessen ref zu verwenden.

Wie würde ich verwenden document.getElementById() oder ähnliches den folgenden Beispiel-HTML-Block an der Stelle eines bestimmten div einzufügen:

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

Answer 1

eine ID an das Element der obersten Ebene der HTML-Weisen reagieren mache. Es wird nach wie vor das id-Attribut enthalten und kann somit nach wie vor mit 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);