React / React Router - 将<a>标签视为<Link>标签

Question

我将通过props将预编译的HTML传递给我的React组件。原始数据大致如下。

let pageData = [
   title  : 'About',
   content: '<p>Hello <strong> World!</p><a href="/contact">Contact</a>'
]

那么在组件中使用 dangerouslySetInnerHTML 方法，因为我不确定是否还有其他方法可用。

import React from 'react';

export default class PostText extends React.Component {
  render() {
    return (
        <div
          dangerouslySetInnerHTML={{__html: this.props.content}}
        />
      </div>
    );
  }
}

但我的问题是，我该如何将 <a href="/contact">联系我们</a> 标签转换为 <Link to="/contact">联系我们</Link>。

即使我不改变标记，是否有一种方法可以做到“当我点击一个 <a> 标签时，将其视为 <Link> 标签”。

- Jordan Overbye

---

你不能直接传递 <Link>...</Link> 吗？你真正想要实现什么？ - Hardik Modha

这个看起来有用吗？（链接为 https://github.com/ReactTraining/react-router/issues/393#issuecomment-193571968） - Hardik Modha

Answer 1

我认为你可以这样做，拦截你的div内部的链接点击事件并使用路由进行导航：

<div
    dangerouslySetInnerHTML={{__html: this.props.content}}
    onClick={event => this.navigate(event)}
  />
</div>

并且：

navigate (event) {
  event.preventDefault()

  if (event.target.tagName === 'A') {
    this.props.router.push(event.target.getAttribute('href'))
  }
}

- dfsq

---

请注意，如果您的链接元素有任何嵌套元素，则需要使用类似于 event.target.closest('a') 的东西来获取包含锚点。 - Trevor Robinson

不应该需要@TrevorRobinson，因为event.target本来就应该是a。 - dfsq

我的第一手浏览器测试（Chrome）和DOM规范不支持您的观点。event.target是最顶层的事件目标，而不是与处理程序相关联的元素。也许您想到的是event.currentTarget。 - Trevor Robinson

@TrevorRobinson 哦，内部元素在 a 里面。为此，您确实需要使用 closest 或 while 循环进行额外的检查。 - dfsq