html – React / React Router – 处理标签之类的标签
发布时间:2020-12-14 23:28:59 所属栏目:资源 来源:网络整理
导读:我通过道具将预编译的 HTML传递给我的React组件.原始数据看起来像这样. let pageData = [ title : 'About',content: 'pHello strong World!/pa href="/contact"Contact/a'] 然后在使用dangerouslySetInnerHTML方法的组件中,因为我不确定是否还有其他东西要使
我通过道具将预编译的
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”>联系< / Link>. 即使我没有更改标记,也有办法执行类似的操作,“当我点击< a>标记时,视为< Link>标记”. 解决方法
我想你可以做这样的事情,拦截链接点击你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')) } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |