使用类似DOMPurify的东西来净化原始html，然后使用dangerlysetinnerhtml会更安全

我喜欢净化

的类型

NPM I—save-dev @types/dompurify

import React from React import * as DOMPurify from DOMPurify; Let dirty = '<b>hello there</b>'; 净化。消毒(脏的); 函数MyComponent() { return <div dangerlysetinnerhtml ={{__html: clean)}} />; ｝

如果在您的特定设置中有问题，可以考虑考虑惊人的isomorphic-dompurify项目，它可以解决人们可能遇到的许多问题。

NPM I同构-dompurify

import React from React 从isomorphic-dompurify导入DOMPurify; Const dirty = '<p>hello</p>' const clean = dompurification .sanitize(脏的); 函数MyComponent() { return <div dangerlysetinnerhtml ={{__html: clean)}} />; ｝

为演示 https://cure53.de/purify

更多的 https://github.com/cure53/DOMPurify

https://github.com/kkomelin/isomorphic-dompurify

除非绝对必要，否则不应该使用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>
            )
    }
}

我试过这个纯成分:

const RawHTML = ({children, className = ""}) => 
<div className={className}
  dangerouslySetInnerHTML={{ __html: children.replace(/\n/g, '<br />')}} />

特性

接受classNameprop(更容易设置样式) 将\n替换为<br />(您通常希望这样做) 在使用组件时将内容作为子组件，如下所示: < RawHTML > {myHTML} < / RawHTML >

我已经在Github: RawHTML: ReactJS纯组件中放置了该组件来渲染HTML

现在有更安全的方法来呈现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'}} />

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

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