所以这是唯一的方式来渲染原始html与reactjs?

// 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中重写所有这些内容。

也许我想错了。请纠正我。


当前回答

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

注意:我是这个模块的作者,几个小时前刚刚发布了它。请随时报告任何bug或可用性问题。

其他回答

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

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

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

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

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

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

下面是之前发布的一个不那么武断的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>

使用类似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