dangerlysetinnerhtml是React在浏览器DOM中使用innerHTML的替代品。一般来说，从代码中设置HTML是有风险的，因为很容易在不经意间让用户暴露在跨站点脚本(XSS)攻击之下。

在通过dangerlysetinnerhtml将原始HTML注入DOM之前，对其进行消毒(例如，使用DOMPurify)会更好/更安全。

DOMPurify -一个dom专用的、超快的、超宽容的HTML、MathML和SVG的XSS消毒液。DOMPurify使用一个安全的默认，但是提供了很多可配置性和钩子。

例子:

import React from 'react'
import createDOMPurify from 'dompurify'
import { JSDOM } from 'jsdom'

const window = (new JSDOM('')).window
const DOMPurify = createDOMPurify(window)

const rawHTML = `
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
`

const YourComponent = () => (
  <div>
    { <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(rawHTML) }} /> }
  </div>
)

export default YourComponent

现在有更安全的方法来呈现HTML。我在之前的回答中提到过这个问题。你有4个选项，最后使用dangerlysetinnerhtml。

渲染HTML的方法

Easiest - Use Unicode, save the file as UTF-8 and set the charset to UTF-8. <div>{'First · Second'}</div> Safer - Use the Unicode number for the entity inside a Javascript string. <div>{'First \u00b7 Second'}</div> or <div>{'First ' + String.fromCharCode(183) + ' Second'}</div> Or a mixed array with strings and JSX elements. <div>{['First ', <span>&middot;</span>, ' Second']}</div> Last Resort - Insert raw HTML using dangerouslySetInnerHTML. <div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

除非绝对必要，否则不应该使用dangerlysetinnerhtml。根据文档，“这主要是为了与DOM字符串操作库合作”。当你使用它时，你就放弃了React的DOM管理的好处。

在您的情况下，转换为有效的JSX语法非常简单;只需将类属性更改为className即可。或者，正如上面评论中提到的，你可以使用ReactBootstrap库，它将Bootstrap元素封装到React组件中。

export class ModalBody extends Component{
    rawMarkup(){
        var rawMarkup = this.props.content
        return { __html: rawMarkup };
    }
    render(){
        return(
                <div className="modal-body">
                     <span dangerouslySetInnerHTML={this.rawMarkup()} />

                </div>
            )
    }
}

我使用了这个名为Parser的库。它满足了我的需要。

import React, { Component } from 'react';    
import Parser from 'html-react-parser';

class MyComponent extends Component {
  render() {
    <div>{Parser(this.state.message)}</div>
  }
};

我曾在一些快速且不太规范的情况下使用过这个短语:

// react render method:

render() {
    return (
      <div>
        { this.props.textOrHtml.indexOf('</') !== -1
            ? (
                <div dangerouslySetInnerHTML={{__html: this.props.textOrHtml.replace(/(<? *script)/gi, 'illegalscript')}} >
                </div>
              )
            : this.props.textOrHtml
          }

      </div>
      )
  }