所以这是唯一的方式来渲染原始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。我在之前的回答中提到过这个问题。你有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'}} />

其他回答

我试过这个纯成分:

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

特性

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

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

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

我需要在我的头脑中使用一个带有onLoad属性的链接,其中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>`,}}/>

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

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