用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

现在有更安全的方法来呈现HTML.我在前面的回答包括在本这里.您有4个选项,最后一次使用dangerouslySetInnerHTML.

呈现HTML的方法

1. 最简单 - 使用Unicode,将文件保存为UTF-8并将其设置charset为UTF-8.

   <div>{'First · Second'}</div>

2. 更安全 - 在Javascript字符串中使用Unicode编号.

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

   要么

   <div>{'First ' + String.fromCharCode(183) + ' Second'}</div>

3. 或者是带有字符串和JSX元素的混合数组.

   <div>{['First ', <span>&middot;</span>, ' Second']}</div>

4. 最后的手段 - 使用原始HTML插入dangerouslySetInnerHTML.

   <div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

Answer 2

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

在通过dangerouslySetInnerHTML.

DOMPurify - 用于 HTML、MathML 和 SVG 的仅 DOM、超快、超容忍 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

Answer 3

您可以html-to-react在https://www.npmjs.com/package/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

我试过这个纯组件:

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

特征

• 采取className道具(更容易设计)
• 替换\n到<br />(你经常想这样做)
• 使用组件时将内容作为子项放置,如:
• <RawHTML>{myHTML}</RawHTML>

我已经将组件放在Github的Gist中:RawHTML:ReactJS纯组件来呈现HTML

Answer 6

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 7

dangerouslySetInnerHTML除非绝对必要，否则请勿使用。根据文档，“这主要是用于与DOM字符串操作库进行协作”。使用它时，您将放弃React的DOM管理的好处。

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

Answer 8

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

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

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