외부 dom 요소 조작 React 구성 요소

Question

HTML 문서의 작은 부분에만 HTML을 렌더링하는 React 구성 요소가 있습니다.

React 구성 요소 내에서 구성 요소 외부에있는 요소를 HTML 블록으로 교체해야합니다.

아무리 내가 이것을 검색하고 있어도 이것을 달성 할 수있는 방법을 찾을 수 없다. 자연스럽게 처방되는 React의 지침이 대신 ref을 사용하기 때문이라고 생각합니다. 렌더링 반응

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

Answer 1

는 HTML의 최상위 요소에 ID를 할당합니다

어떻게 특정 사업부의 장소에서 다음 샘플 HTML 블록을 삽입 유사 document.getElementById() 또는 아무것도를 사용합니다. 그것은 여전히 ​​따라서 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);