Come trasformare testo semplice in html JSX in ReactJS

Question

Ho componente come questo:

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 mi restituisce un valore stringa come questa:

"So basically <a href="http://www.silastar.com/dev-sila" target="_blank">silastar.com/dev-sila</a> is perfect and works correctly?" 

Come convertire questa stringa in html JSX in modo che il link di ancoraggio apparirebbe come link non come testo normale ??

Answer 1

Devi usare dangerouslySetInnerHTML:

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