使用 reactjs 渲染原始 html

Question

那么这是使用 reactjs 渲染原始 html 的唯一方法吗？

// http://facebook.github.io/react/docs/tutorial.html
// tutorial7.js
var converter = new Showdown.converter();
var Comment = React.createClass({
  render: function() {
    var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
      </div>
    );
  }
});

我知道有一些很酷的方法可以用 JSX 标记内容，但我主要感兴趣的是能够呈现原始 html（具有所有类、内联样式等。 ).像这样复杂的东西：

<!-- http://getbootstrap.com/components/#dropdowns-example -->
<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>

我不想在 JSX 中重写所有这些。

也许我的想法是错误的。请指正。

Answer 1

除非绝对必要，否则不应使用

dangerouslySetInnerHTML。根据文档，"This is mainly for cooperating with DOM string manipulation libraries"。当你使用它时，你就放弃了 React 的 DOM 管理的好处。

对于您的情况，转换为有效的 JSX 语法非常简单；只需将 class 属性更改为 className。或者，如上面评论所述，您可以使用 ReactBootstrap 库，它将 Bootstrap 元素封装到 React 组件中。

Answer 2

现在有更安全的渲染方法 HTML。我在之前的回答 here 中对此进行了介绍。您有 4 个选项，最后一个使用 dangerouslySetInnerHTML。

渲染方法HTML

最简单 - 使用 Unicode，将文件保存为 UTF-8 并将 charset 设置为 UTF-8。

<div>{'First · Second'}</div>
更安全 - 在 Javascript 字符串中使用实体的 Unicode 编号。

<div>{'First \u00b7 Second'}</div>

或

<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
或者字符串和 JSX 元素的混合数组。

<div>{['First ', <span>·</span>, ' Second']}</div>
不得已 - 使用dangerouslySetInnerHTML.
插入原始HTML
<div dangerouslySetInnerHTML={{__html: 'First · Second'}} />

Answer 3

您可以利用 html-to-react npm 模块。

注意：我是该模块的作者，几个小时前刚刚发布。请随时报告任何错误或可用性问题。

Answer 4

我在快速和肮脏的情况下使用过它：

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

Answer 5

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

Answer 6

我试过这个纯成分：

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

特征

采用 classNameprop（更容易设置样式）
将 \n 替换为 <br />（您经常想这样做）
在使用组件时将内容作为 children 放置：
<RawHTML>{myHTML}</RawHTML>

我已将组件放在 Github 的 Gist 中：RawHTML: ReactJS pure component to render HTML

Answer 7

这是之前发布的 RawHTML 函数的一个不太固执己见的版本。它让你：

配置标签
可选择将换行符替换为 <br /> 的
传递 RawHTML 将传递给创建的元素的额外属性
提供一个空字符串 (RawHTML></RawHTML>)

组件如下：

const RawHTML = ({ children, tag = 'div', nl2br = true, ...rest }) =>
    React.createElement(tag, {
        dangerouslySetInnerHTML: {
            __html: nl2br
                ? children && children.replace(/\n/g, '<br />')
                : children,
        },
        ...rest,
    });
RawHTML.propTypes = {
    children: PropTypes.string,
    nl2br: PropTypes.bool,
    tag: PropTypes.string,
};

用法：

<RawHTML>{'First &middot; Second'}</RawHTML>
<RawHTML tag="h2">{'First &middot; Second'}</RawHTML>
<RawHTML tag="h2" className="test">{'First &middot; Second'}</RawHTML>
<RawHTML>{'first line\nsecond line'}</RawHTML>
<RawHTML nl2br={false}>{'first line\nsecond line'}</RawHTML>
<RawHTML></RawHTML>

输出：

<div>First · Second</div>
<h2>First · Second</h2>
<h2 class="test">First · Second</h2>
<div>first line<br>second line</div>
<div>first line
second line</div>
<div></div>

它将在以下时间中断：

<RawHTML><h1>First &middot; Second</h1></RawHTML>

Answer 8

我用了this library called Parser。它满足了我的需要。

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

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

Answer 9

我需要在脑中使用带有 onLoad 属性的 link，而 div 是不允许的，所以这让我很痛苦。我目前的解决方法是关闭原始脚本标签，做我需要做的，然后打开脚本标签（由原始标签关闭）。希望这可能对别无选择的人有所帮助：

<script dangerouslySetInnerHTML={{ __html: `</script>
   <link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans" as="style" onLoad="this.onload=null;this.rel='stylesheet'" crossOrigin="anonymous"/>
<script>`,}}/>

Answer 10

dangerouslySetInnerHTML 是 React 在浏览器 DOM 中使用 innerHTML 的替代品。一般来说，从代码中设置 HTML 是有风险的，因为它很容易在无意中使您的用户暴露于 cross-site 脚本 (XSS) 攻击。

在通过 dangerouslySetInnerHTML 将原始 HTML 注入 DOM 之前，better/safer 对其进行消毒（使用例如 DOMPurify）。 =14=]

DOMPurify - 用于 HTML、MathML 和 SVG 的 DOM-only、super-fast、uber-tolerant 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

使用 reactjs 渲染原始 html

Rendering raw html with reactjs

javascript

reactjs