網站搜尋

javascript - 我如何在 React 中渲染原始 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（包括所有的 class、內聯樣式等）感興趣。像這樣的複雜內容：

<!-- 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。

也許我對這件事的想法完全錯了。請糾正我。

答案＃1

現在有更安全的方法來呈現 HTML。我在之前的回答中提到過這一點。你有四個選擇，最後一個使用 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. 最後手段 - 使用 dangerouslySetInnerHTML 插入原始 HTML。

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

答案＃2

dangerouslySetInnerHTML 是 React 用來替代在瀏覽器 DOM 中使用 innerHTML 的方法。一般來說，從程式碼設置 HTML 是有風險的，因為很容易不小心讓使用者暴露於跨網站指令碼 (XSS) 攻擊中。

在將原始 HTML 通過 dangerouslySetInnerHTML 插入 DOM 之前，最好/更安全地對其進行消毒（例如使用 DOMPurify）。

DOMPurify - 一個僅使用 DOM 的超快速、極度容忍的 XSS 清理工具，適用於 HTML、MathML 和 SVG。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

答案＃3

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

注意：我是這個模組的作者，幾小時前才剛發布。請隨時回報任何錯誤或使用上的問題。

答案＃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>
      )
  }

答案＃5

我已經嘗試過這個純組件：

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

功能

  • 接收 className 屬性（更容易進行樣式設計）
  • 將 \n 替換為 <br />（你通常會想這麼做）
  • 在使用該組件時，將內容作為 子元素 放置，如下所示：
  • <RawHTML>{myHTML}</RawHTML>

我已將該元件放在 Github 的 Gist 中：RawHTML：用於渲染 HTML 的 ReactJS 純元件

答案＃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>
            )
    }
}

答案＃7

我使用了這個叫做 Parser 的程式庫。它滿足了我的需求。

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

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