DOM要素を外部に操作します。Reactコンポーネント

Question

HTML文書の小さな部分にのみHTMLを描画するReactコンポーネントがあります。

Reactコンポーネントの中から、コンポーネントの外にある要素をHTMLブロックで置き換える必要があります。

私はこの問題をどれほど抱えていても、これを達成するための真っ直ぐな方法を見つけることはできません。代わりにrefを使用するようにリアクトのガイドラインが定められているからです。

どのように私は特定のdiv要素の代わりに次のサンプルHTMLブロックを挿入するためにdocument.getElementById()または類似のものを使用します。

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

Answer 1

のhtmlのトップレベルの要素にIDを割り当てるには、レンダリング反応します。それはまだ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);