我有这样的组件:
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?"
解决方法
你必须使用
dangerouslySetInnerHTML:
<p dangerouslySetInnerHTML={{__html: Autolinker.link(this.props.activity.text)}} />