使用危险的SetInnerHtml渲染内容时如何使用React链接? [英] How to use React links when rendering content with dangerouslySetInnerHtml?

问题描述

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

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

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

有没有办法在反应中处理这个而不必解析 HTML 并将 标签替换为 ?

解决方案

您可以在 HTML 容器上使用点击处理程序来捕捉点击.如果点击来自 <a> 标签(或其子标签)，您可以阻止默认，并使用 href.

在这种情况下，你可以使用 react-router 的 withRouter 获取历史 对象，并使用push方法通知路由器.您还可以编辑网址，或以其他方式对其进行操作.

示例(使用代码时取消注释并删除控制台):

//import { withRouter } from 'react-router-dom'类 HTMLContent 扩展了 React.Component {contentClickHandler = (e) =>{const targetLink = e.target.closest('a');如果(！目标链接)返回；e.preventDefault();console.log(targetLink.href);//this.props.history.push(e.target.href)};使成为() {返回 (
<a href="http://www.first-link.com">链接 1</a><a href="http://www.second-link.com"><span>链接 2</span></a>
`;ReactDOM.render(<HTMLContent content={content}/>,演示);

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><div id="demo"></div>

So I'm developing a blog page for a react application. The page is loading data from a CMS and the content of the blog post is raw html which I render on the page with:

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

However any links I put in the post like <a href='/'>Home Page</a> don't use react router and instead trigger reloading the page.

Is there a way to handle this in react without having to parse the HTML and replace <a> tags with <Link>?

解决方案

You can use a click handler on the HTML container to catch clicks. If the click originates from an <a> tag (or a childrn of), you can prevent default, and use the href.

In this case, you can use react-router's withRouter to get the history object, and to use the push method to notify the router. You can also edit the url, or manipulate it in other ways.

Example (uncomment and remove the console when you use the code):

// 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>

这篇关于使用危险的SetInnerHtml渲染内容时如何使用React链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！