Reactjs: Rückruf für dangerouslySetInnerHTML komplette

Question

Ich habe zur Zeit eine Komponente reagieren wie folgt aus:

 <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> 

Es scheint, dass dangerouslySetInnerHTML nicht auf Component Lifecycle auswirkt. Ich habe diese Linie in componentDidMount, aber es falsches Ergebnis zurück:

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

Wenn ich versuche, über die Linie in der Konsole dev Tool auszuführen, gibt es wahres Ergebnis, weil Komponente vollständig gerendert wurde.

Wie kann ich Rückruf für gefährlichSetInnerHTML auslösen?

Answer 1

Es gibt keinen Rückruf für die Fertigstellung von dangerouslySetInnerHTML noch müssen Sie auf refs und 10 zurückgreifen.

---

// 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.

Seien Sie sehr vorsichtig mit diesem Ereignis (DOMSubtreeModified) Es ist einfach, eine Endlosschleife zu verursachen, wenn Sie das DOM im Ereignishandler ändern möchten.