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

这是我尝试过的方法以及出现问题的方法。

这有效：

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

这不是：

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

description属性只是HTML内容的普通字符串。但是由于某种原因，它呈现为字符串，而不是HTML。

有什么建议？

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

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

代替这个：

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

如果转义，则应从服务器端进行转换。

该节点是文本，因为已转义

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

确实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>没有引号，''您将得到：

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

如果它是字符串，并且您没有看到任何HTML标记，那么我看到的唯一问题是标记错误。

更新

如果您正在处理HTMLEntitles。您需要先解码它们，然后才能发送给他们，dangerouslySetInnerHTML这就是为什么他们危险地称呼它:)

工作示例：

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

我使用'react-html-parser'

yarn add react-html-parser

import ReactHtmlParser from 'react-html-parser'; 

<div> { ReactHtmlParser (html_string) } </div>

来源上npmjs.com

提升@okram的评论以提高知名度：

从其github描述中：直接将HTML字符串转换为React组件，而无需使用npmjs.com的危险的SetInnerHTML实用程序，可将HTML字符串转换为React组件。避免使用dragonallySetInnerHTML，并将标准HTML元素，属性和内联样式转换为其等效的React。

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

您只使用React的危险的SetInnerHTML方法

<div dangerouslySetInnerHTML={{ __html: htmlString }} />

或者，您可以通过这种简单的方法实现更多功能：在React应用中渲染HTML原始文件

危险地设置内部HTML

angerouslySetInnerHTML是React在浏览器DOM中使用innerHTML的替代。通常，从代码设置HTML是有风险的，因为很容易无意间使您的用户遭受跨站点脚本（XSS）攻击。因此，您可以直接从React设置HTML，但是您必须键入hazardlySetInnerHTML并使用__html键传递对象，以提醒自己这很危险。例如：

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

我一起使用innerHTML引用来跨越：

import React, { useRef, useEffect, useState } from 'react';

export default function Sample() {
  const spanRef = useRef<HTMLSpanElement>(null);
  const [someHTML,] = useState("some <b>bold</b>");

  useEffect(() => {
    if (spanRef.current) {
      spanRef.current.innerHTML = someHTML;
    }
  }, [spanRef.current, someHTML]);

  return <div>
    my custom text follows<br />
    <span ref={spanRef} />
  </div>
}

就我而言，我使用了react-render-html

首先安装软件包 npm i --save react-render-html

然后，

import renderHTML from 'react-render-html';

renderHTML("<a class='github' href='https://github.com'><b>GitHub</b></a>")

我无法npm build与一起工作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>);
}

我使用https://www.npmjs.com/package/html-to-react

const HtmlToReactParser = require('html-to-react').Parser;
let htmlInput = html.template;
let htmlToReactParser = new HtmlToReactParser();
let reactElement = htmlToReactParser.parse(htmlInput); 
return(<div>{reactElement}</div>)

如果您可以控制{this.props.match.description}并且使用的是JSX。我建议不要使用“ dangerouslySetInnerHTML”。

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