我有这样的组件:
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)}} />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。