如何在ReactJS中将纯文本转换为html JSX
发布时间:2020-12-14 22:28:54 所属栏目:资源 来源:网络整理
导读:我有这样的组件: import React from 'react';import Autolinker from 'autolinker';class Comment extends React.Component{ constructor(props){ super(props); } render(){ return li className="media comment" div className="image" img src={this.pro
我有这样的组件:
import React from 'react'; import Autolinker from 'autolinker'; class Comment extends React.Component{ constructor(props){ super(props); } render(){ return <li className="media comment"> <div className="image"> <img src={this.props.activity.user.avatar.small_url} width="42" height="42" /> </div> <div className="body"> <p> <strong>{this.props.activity.user.full_name}</strong> </p> </div> <div> <p> {Autolinker.link(this.props.activity.text)} </p> </div> </li>; } } export default Comment; Autolinker返回一个字符串值,如下所示: "So basically <a href="http://www.silastar.com/dev-sila" target="_blank">silastar.com/dev-sila</a> is perfect and works correctly?" 如何将此字符串转换为html JSX,以便锚链接显示为链接而不是纯文本? 解决方法
你必须使用
dangerouslySetInnerHTML:
<p dangerouslySetInnerHTML={{__html: Autolinker.link(this.props.activity.text)}} /> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |