在使用危险地设置内容来呈现内容时如何使用React链接？

小编典典

在使用危险地设置内容来呈现内容时如何使用React链接？

reactjs

因此，我正在为React应用程序开发一个博客页面。该页面正在从CMS加载数据，并且博客文章的内容是原始html，我在页面上使用以下格式呈现：

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

但是，我张贴在帖子中的任何链接 <a href='/'>Home Page</a>都不要使用react router，而是触发重新加载页面。

有没有一种方法可以解决此问题，而不必解析HTML并用替换<a>标签<Link>？

阅读 217

2020-07-22

共1个答案

小编典典

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

在这种情况下，您可以使用react-router的 withRouter 来获取
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>

2020-07-22