Reactjs：回調dangerouslySetInnerHTML完整

Question

我目前有一個陣營組件是這樣的：

 <div id="product-content" className="bz"> 
      <a className="anchor" id="content-anchor"></a> 
      <h2 className="title-section">Thông tin sản phẩm</h2> 
      <div className="fixed-menu-content"> 
       <div className="container"> 
        <ul> 
         <li><a href="#content-anchor">Thông tin sản phẩm</a></li> 
         <li><a href="javascript:void(0)">Video sản phẩm</a></li> 
         <li><a href="#rating-anchor">Đánh giá (19)</a></li> 
         <li><a href="#guide-anchor">Hướng dẫn mua hàng</a></li> 
        </ul> 
       </div> 
      </div> 
      <div dangerouslySetInnerHTML={{__html: description}}></div> 
     </div> 

看來，dangerouslySetInnerHTML不會影響到組件的生命週期。我把componentDidMount這條線，但它返回錯誤的結果：

let b = $("#product-content").height(); // wrong: 600, true: 6500 

如果我努力向控制檯開發工具線運行，因爲組件已經完全呈現，則返回true結果。

如何觸發危險設置爲intInterHTML的回調？

Answer 1

沒有完成dangerouslySetInnerHTML的回調尚未完成，您將不得不求助於refs和DOMSubtreeModified。

---

// use ref to get the DOM Node 
<div 
    dangerouslySetInnerHTML={{__html: description}} 
    ref={myElement => this.myElement = myElement} 
    > 
</div> 

// Listen for changes inside the DOM Node 
componentDidMount() { 
    this.myElement.addEventListener('DOMSubtreeModified',() => { 
     // execute your logic here... 
    }); 
} 

// Don't forget to clean up the listener 
componentWillUnmount() { 
    this.myElement.removeEventListener('DOMSubtreeModified'); 
} 

PS。

對此事件（DOMSubtreeModified）非常小心，如果您決定更改事件處理函數內部的DOM，很容易導致無限循環。