如何将原始 html <a href> 标签连接到 React javascript？答案

【问题标题】：How to connect raw html <a href> tag to React javascript?如何将原始 html <a href> 标签连接到 React javascript？
【发布时间】：2018-09-13 09:36:11
【问题描述】：

我构建了一个小型 Web 应用程序，通过提取原始 html WikiPedia 文章内容（通过它的 api）来模拟浏览 WikiPedia。然后，我使用“dangerouslySetInnerHTML”在我的应用程序中显示 html。

我试图弄清楚如何允许用户单击未安装的标签并在 React 端捕获该事件。我想捕获该标记单击以更新 UI 状态并发出服务器请求。

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

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

【问题讨论】：

发布您已经拥有的相关代码以及问题肯定会有所帮助。尽管如此，您似乎正在寻找一个反应标签

标签： javascript html reactjs dom

【解决方案1】：

我认为可能有更好的方法来做你想做的事情，但是使用你当前的实现：

你可以在你正在做的危险的节点上获取一个引用SetInnerHTML，添加一个点击事件监听器，使用事件冒泡来捕捉那个链接事件，最后调用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>'}}
        />
      )
    }
}

【讨论】：

【解决方案2】：

所以我有点从另一个角度看待这个问题。

我在想“嗯，dangerouslySetInnerHTML 听起来很不祥，好像我可能不应该使用它。我想知道是否有更好、更安全的替代方案......”。

在谷歌上快速搜索“alternative to dangerouslySetInnerHTML”后，有希望的结果之一是this Medium article。

TLDR;我们可以使用 HTML React Parser 之类的包做一些很酷的事情，这可能会解决我们无法正确捕获事件的问题。

如果我们可以再次访问event 对象，我们应该能够读取它的属性并做我们需要做的任何其他事情

【讨论】：