javascript - 如何将原始 html 标签连接到 React javascript？

Question

我构建了一个小型网络应用程序，通过提取原始 html 维基百科文章内容(通过它的 api)来模拟浏览维基百科。然后，我使用“dangerouslySetInnerHTML”在我的应用程序中显示 html。

我试图找出如何允许用户单击未安装的 < ahref="wiki/javascript"> 标签并在 React 端捕获该事件。我想捕获该标签单击以更新 UI 状态并发出服务器请求。

当使用“dangerouslySetInnerHTML”时， react 无法识别点击事件。因此，我在 React 端的全局窗口对象上添加了一个函数，供标签单击，但会收到有关“未安装的组件”和“内存泄漏”的警告。

如何防止原始未安装的标签重新加载页面并捕获该单击事件以更新我的 React 的 UI？

Answer 1

我认为可能有更好的方法来完成您想要做的事情，但是根据您当前的实现:

您可以在正在执行危险设置InnerHTML的节点上获取引用，添加单击事件监听器，使用事件冒泡来捕获该链接事件，最后调用preventDefault()。

class App extends Component {

    componentDidMount(){
      if(this.myRef){
        this.myRef.addEventListener('click', this.anchorLinkListener);
      }
    }

    componentWillUnmount(){
      if(this.myRef){
         this.myRef.removeEventListener('click', this.anchorLinkListener)
      }
    }

    anchorLinkListener = (e) => {
       if(e.target.tagName === 'A') {
          console.log('Anchor link clicked')
          e.preventDefault();
       }
    }

    render(){
      return (
        <div 
          ref={(ref) => {this.myRef = ref}}
          dangerouslySetInnerHTML={{__html: '<a href="http://stackoverflow.com">click me</a>'}}
        />
      )
    }
}