如何在ReactJS中将纯文本转换为html JSX

前端之家收集整理的这篇文章主要介绍了如何在ReactJS中将纯文本转换为html JSX前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这样的组件:
  1. import React from 'react';
  2. import Autolinker from 'autolinker';
  3.  
  4. class Comment extends React.Component{
  5.  
  6. constructor(props){
  7. super(props);
  8. }
  9.  
  10. render(){
  11. return <li className="media comment">
  12. <div className="image">
  13. <img src={this.props.activity.user.avatar.small_url} width="42" height="42" />
  14. </div>
  15. <div className="body">
  16. <p>
  17. <strong>{this.props.activity.user.full_name}</strong>
  18. </p>
  19. </div>
  20. <div>
  21. <p>
  22. {Autolinker.link(this.props.activity.text)}
  23. </p>
  24. </div>
  25. </li>;
  26. }
  27. }
  28.  
  29. export default Comment;

Autolinker返回一个字符串值,如下所示:

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

如何将此字符串转换为html JSX,以便锚链接显示链接而不是纯文本?

解决方法

你必须使用 dangerouslySetInnerHTML
  1. <p dangerouslySetInnerHTML={{__html: Autolinker.link(this.props.activity.text)}} />

猜你在找的HTML相关文章