加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

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

发布时间:2020-12-14 22:28:54 所属栏目:资源 来源:网络整理
导读:我有这样的组件: 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.pro
我有这样的组件:
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,以便锚链接显示为链接而不是纯文本?

解决方法

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读