以下是我尝试过的方法,以及出错的地方。

如此:

<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />

这不是:

<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />

description属性只是一个普通的HTML内容字符串。然而,由于某些原因,它被呈现为字符串,而不是HTML。

有什么建议吗?


当前回答

如果你可以控制包含html的字符串从哪里来(即。),你可以从新的<Fragment> API中受益,做一些像这样的事情:

import React, {Fragment} from 'react'

const stringsSomeWithHtml = {
  testOne: (
    <Fragment>
      Some text <strong>wrapped with strong</strong>
    </Fragment>
  ),
  testTwo: `This is just a plain string, but it'll print fine too`,
}

...

render() {
  return <div>{stringsSomeWithHtml[prop.key]}</div>
}

其他回答

我不能让npm构建与react-html-parser一起工作。然而,在我的情况下,我能够成功地利用https://reactjs.org/docs/fragments.html。我需要显示一些html unicode字符,但它们不应该直接嵌入到JSX中。在JSX中,它必须从组件的状态中选择。组件代码片段如下:

constructor() 
{
this.state = {
      rankMap : {"5" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9733;</Fragment> , 
                 "4" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9734;</Fragment>, 
                 "3" : <Fragment>&#9733; &#9733; &#9733; &#9734; &#9734;</Fragment> , 
                 "2" : <Fragment>&#9733; &#9733; &#9734; &#9734; &#9734;</Fragment>, 
                 "1" : <Fragment>&#9733; &#9734; &#9734; &#9734; &#9734;</Fragment>}
                };
}

render() 
{
       return (<div class="card-footer">
                    <small class="text-muted">{ this.state.rankMap["5"] }</small>
               </div>);
}

你只是使用了React的dangerlysetinnerhtml方法

<div dangerouslySetInnerHTML={{\ __html: htmlsthtml} />

或者你可以用这个简单的方法实现更多:在React应用程序中渲染HTML原始

如果你可以控制包含html的字符串从哪里来(即。),你可以从新的<Fragment> API中受益,做一些像这样的事情:

import React, {Fragment} from 'react'

const stringsSomeWithHtml = {
  testOne: (
    <Fragment>
      Some text <strong>wrapped with strong</strong>
    </Fragment>
  ),
  testTwo: `This is just a plain string, but it'll print fine too`,
}

...

render() {
  return <div>{stringsSomeWithHtml[prop.key]}</div>
}

检查你试图附加到节点的文本是否没有像这样转义:

var prop = {
    match: {
        description: '&lt;h1&gt;Hi there!&lt;/h1&gt;'
    }
};

而不是这样:

var prop = {
    match: {
        description: '<h1>Hi there!</h1>'
    }
};

如果转义,您应该从服务器端转换它。

节点为文本,因为已转义

该节点是dom节点,因为没有转义

如果您可以控制{this.props.match.description},并且您正在使用JSX。我建议不要使用“dangerlysetinnerhtml”。

// In JSX, you can define a html object rather than a string to contain raw HTML
let description = <h1>Hi there!</h1>;

// Here is how you print
return (
    {description}
);