将HTML字符串呈现为React组件中的真实HTML

Here's what I tried and how it goes wrong.

这是我尝试过的以及它是如何出错的。

This works:

这有效：

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

This doesn't:

这不是：

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

---

The description property is just a normal string of HTML content. However it's rendered as a string, not as HTML for some reason.

description属性只是HTML内容的普通字符串。然而，由于某种原因，它被渲染为字符串，而不是HTML。

Any suggestions?

有什么建议么？

3 个解决方案

#1

Check if the text you're trying to append to the node is no escaped like this:

检查您尝试附加到节点的文本是否没有像这样转义：

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

Instead of this:

而不是这个：

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

if is escaped you should convert it from your server-side.

如果被转义，你应该从服务器端转换它。

The node is text because is escaped

该节点是文本，因为它是转义的

The node is a dom node because isn't escaped

节点是dom节点，因为没有转义

#2

Does this.props.match.description Is a string or an object? If it's a string, it should be converted to HTML just fine. Example:

this.props.match.description是字符串还是对象？如果它是一个字符串，它应该转换为HTML就好了。例：

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: '<h1 style="color:red;">something</h1>'
    }
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.description }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Result: http://codepen.io/ilanus/pen/QKgoLA?editors=1011

结果：http：//codepen.io/ilanus/pen/QKgoLA？编辑= 1011

However if description: <h1 style="color:red;">something</h1> without the quotes '' you're going to get:

但是，如果描述：

某事 没有引号''你会得到：

​Object {
$$typeof: [object Symbol] {},
  _owner: null,
  key: null,
  props: Object {
    children: "something",
    style: "color:red;"
  },
  ref: null,
  type: "h1"
}

If It's a string and you don't see any HTML markup the only problem i see is wrong markup..

如果它是一个字符串，你没有看到任何HTML标记，我看到的唯一问题是错误的标记..

UPDATE

UPDATE

If you are dealing with HTMLEntitles. You need to decode them before sending them to dangerouslySetInnerHTML that's why they called it dangerously :)

如果您正在处理HTMLEntitles。你需要在将它们发送到dangerouslySetInnerHTML之前对它们进行解码，这就是为什么它们危险地称之为:)

Working example:

工作范例：

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: '<p><strong>Our Opportunity:</strong></p>'
    }
  }

   htmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.htmlDecode(this.state.description) }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

#3

If you have control over where the string containing html is coming from (ie. somewhere in your app), you can benefit from the new <Fragment> API, doing something like:

如果您可以控制包含html的字符串的来源（即应用程序中的某个位置），您可以从新的 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>
}