Как преобразовать обычный текст в html JSX в ReactJS
у меня есть компонент такой:
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, чтобы Якорная ссылка отображалась как ссылка, а не как обычный текст??
1 ответов
вы должны использовать dangerouslySetInnerHTML:
<p dangerouslySetInnerHTML={{__html: Autolinker.link(this.props.activity.text)}} />