Как превратить обычный текст в HTML JSX в ReactJS

Question

У меня есть компонент, как это:

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 так что якорная ссылка появится как ссылка не как обычный текст?

Answer 1

Вы должны использовать dangerouslySetInnerHTML:

<p dangerouslySetInnerHTML={{__html: Autolinker.link(this.props.activity.text)}} />