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

如此:

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

这不是:

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

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

有什么建议吗?


当前回答

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

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

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'));

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

但是如果description是<h1 style="color:red;">something</h1> without the quotes ",你会得到:

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

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

更新

如果你正在处理HTML实体,你需要解码他们之前发送他们到dangerlysetinnerhtml,这就是为什么它被称为“dangerous”:)

工作的例子:

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: '&lt;p&gt;&lt;strong&gt;Our Opportunity:&lt;/strong&gt;&lt;/p&gt;'
    }
  }

   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'));

// For typescript import parse, { HTMLReactParserOptions } from "html-react-parser"; import { Element } from "domhandler/lib/node"; export function contentHandler(postContent: string) { const options: HTMLReactParserOptions = { replace: (domNode: Element) => { if (domNode.attribs) { if (domNode.attribs.id === 'shortcode') { return <div className="leadform">Shortcode</div>; } } }, }; return parse(postContent, options); } // Usage: contentHandler("<span>Hello World!</span>")

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

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

而不是这样:

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

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

节点为文本,因为已转义

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

如果你可以控制包含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>
}