如果你在字符串中有HTML，我建议使用一个叫做HTML -react-parser的包。

安装

NPM:

npm install html-react-parser

纱:

yarn add html-react-parser

使用

import parse from 'html-react-parser'
const yourHtmlString = '<h1>Hello</h1>'

代码:

<div>
    {parse(yourHtmlString)}
</div>

如果你在字符串中有HTML，我建议使用一个叫做HTML -react-parser的包。

安装

NPM:

npm install html-react-parser

纱:

yarn add html-react-parser

使用

import parse from 'html-react-parser'
const yourHtmlString = '<h1>Hello</h1>'

代码:

<div>
    {parse(yourHtmlString)}
</div>

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

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

你也可以使用跳线包中的parseReactHTMLComponent。看一下就知道，它很简单，不需要使用JSX语法。

https://codesandbox.io/s/jumper-module-react-simple-parser-3b8c9?file=/src/App.js。

关于跳线的更多信息:

https://github.com/Grano22/jumper/blob/master/components.js

NPM包:

https://www.npmjs.com/package/jumper_react

你只是使用了React的dangerlysetinnerhtml方法

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

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