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

Question

我正在通过道具将预编译的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">Contact</a>标签转换为<Link to="/contact">Contact</Link>。

即使我不更改标记，也可以执行类似的操作，例如“当我单击<a>标签时，将其视为<Link>标签”。

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'))
  }
}