栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

您可以在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>


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/425786.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号