如何在使用dangerouslySetInnerHtml呈现内容时使用React链接？
如何在使用dangerouslySetInnerHtml呈现内容时使用React链接？
提问于 2018-07-28 17:33:04
因此，我正在为react应用程序开发一个博客页面。页面正在从CMS加载数据，博客帖子的内容是原始html，我使用以下命令在页面上呈现它：
<div dangerouslySetInnerHTML={{__html: this.state.content}} />但是，我在帖子中添加的任何链接，如<a href='/'>Home Page</a>，都不使用react路由器，而是触发重新加载页面。
有没有一种方法可以在react中处理这个问题，而不必解析HTML语言并用<Link>替换<a>标记
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-28 18:16:47
您可以在HTML容器上使用单击处理程序来捕获单击。如果单击源自<a>标签(或的子标签)，则可以防止默认，并使用href。
在这种情况下，您可以使用react- router的来获取对象，并使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51569981
复制相关文章
相似问题