我有这样的组件:
- 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)}} />