Reactjs:dangerouslySetInnerHTML 回调完成

Question

我目前有一个像这样的 React 组件:

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

看来危险的SetInnerHTML不会影响组件生命周期。我将这一行放在 componentDidMount 中，但它返回错误的结果:

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

如果我尝试在控制台开发工具中运行上面的行，它会返回 true 结果，因为组件已完全渲染。

如何触发angerlySetInnerHTML的回调？

Answer 1

看起来像DOMSubtreeModified事件已被弃用，取而代之的是 Mutation Observer API .

您可以重构 lustoykov 提出的代码以使用新的 API:

class ContentRenderer extends React.Component {
  componentDidMount() {
      this.observer = new MutationObserver(this.handleMutation);
      this.observer.observe(this.myElement, {
        // Check config in https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
        childList: true,
        attributes: true,
        characterData: true
      });
    }
  
    componentWillUnmount() { 
      this.observer.disconnect();
    }
    
    handleMutation() {
      console.log('mutation');
    }
    
    render() {
      return (
        <div 
          dangerouslySetInnerHTML={{ __html: "<div>Test</div>" }}
          ref={(myElement) => { this.myElement = myElement; }}
        />
      );
    }
  }