使用reactjs渲染原始HTML

那么这是用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中重写所有内容。

也许我在想这一切错。请纠正我。

您可以利用html-to-reactnpm模块。

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

现在有更安全的方法来呈现HTML。我在这里以前的回答中对此进行了介绍。您有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>
不得已-使用插入原始HTML dangerouslySetInnerHTML。

<div dangerouslySetInnerHTML={{__html: 'First · 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>
      )
  }

我已经尝试过这个纯组件：

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

特征

拿起className道具（更轻松地设置样式）
替换\n为<br />（您通常想这样做）
使用以下组件时，将内容作为子元素放置：
<RawHTML>{myHTML}</RawHTML>

我已将该组件放置在Github的要点中：RawHTML：ReactJS纯组件来呈现HTML

angerouslySetInnerHTML是React在浏览器DOM中使用innerHTML的替代。通常，从代码设置HTML是有风险的，因为很容易无意间使您的用户遭受跨站点脚本（XSS）攻击。

在将原始HTML通过注入DOM之前，最好对它进行清理（使用DOMPurify等）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

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

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

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

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

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

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

这是之前发布的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>

我需要在头上使用带有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>`,}}/>

本文地址：http://javascript.askforanswer.com/shiyongreactjsxuanranyuanshihtml.html
文章标签：javascript , reactjs
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

文件下载