时间戳

首页 > 解决方案 > 使用 dangerouslySetInnerHtml 渲染内容时如何使用 React 链接？

javascript - 使用 dangerouslySetInnerHtml 渲染内容时如何使用 React 链接？

问题描述

所以我正在为一个反应应用程序开发一个博客页面。该页面正在从 CMS 加载数据，博客文章的内容是我在页面上呈现的原始 html：

<div dangerouslySetInnerHTML={{__html: this.state.content}} />

但是，我在帖子中放置的任何链接 <a href='/'>Home Page</a>都不要使用反应路由器，而是触发重新加载页面。

有没有办法在反应中处理这个问题而不必解析 HTML 并用 替换<a>标签<Link>？

标签： javascriptreactjsreact-router

解决方案

您可以使用 HTML 容器上的点击处理程序来捕获点击。如果点击来自<a>标签（或子标签），您可以阻止默认，并使用href.

在这种情况下，您可以使用 react-routerwithRouter获取history对象，并使用push方法通知路由器。您还可以编辑 url，或以其他方式对其进行操作。

示例（使用代码时取消注释并删除控制台）：

// import { withRouter } from 'react-router-dom'

class HTMLContent extends React.Component {
  contentClickHandler = (e) => {
    const targetLink = e.target.closest('a');
    if(!targetLink) return;
    e.preventDefault();
    
    console.log(targetLink.href); // this.props.history.push(e.target.href)
  };
  
  render() {
    return (
      <div 
        onClick={this.contentClickHandler}
        dangerouslySetInnerHTML={{__html: this.props.content}} 
      />
    );
  }
}

// export default withRouter(HTMLContent);

const content = `<div>
  <a href="http://www.first-link.com">Link 1</a>
  <a href="http://www.second-link.com"><span>Link 2</span></a>
</div>`;

ReactDOM.render(
  <HTMLContent content={content} />,
  demo
);
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="demo"></div>

推荐阅读