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

概述我有这样的组件： import React from 'react';import Autolinker from 'autolinker';class Comment extends React.Component{ constructor(props){ super(props); } render(){ return <li @H_404_1@我有这样的组件：

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)}} />

总结

以上是内存溢出为你收集整理的如何在ReactJS中将纯文本转换为html JSX全部内容，希望文章能够帮你解决如何在ReactJS中将纯文本转换为html JSX所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。