Kết xuất html thô với Reacjs

Vì vậy, đây có phải là cách duy nhất để hiển thị html thô với Reacjs?

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

Tôi biết có một số cách hay để đánh dấu công cụ với JSX, nhưng tôi chủ yếu quan tâm đến việc có thể hiển thị html thô (với tất cả các lớp, kiểu nội tuyến, v.v.). Một cái gì đó phức tạp như thế này:

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

Tôi không muốn phải viết lại tất cả những điều đó trong JSX.

Có lẽ tôi đang nghĩ về điều này tất cả sai. Xin hãy sửa cho tôi.

Bạn có thể tận dụng html-to-reactmô-đun npm.

Lưu ý: Tôi là tác giả của mô-đun và vừa xuất bản nó vài giờ trước. Xin vui lòng báo cáo bất kỳ lỗi hoặc vấn đề sử dụng.

Hiện tại có các phương pháp an toàn hơn để kết xuất HTML. Tôi đã đề cập đến điều này trong một câu trả lời trước đây . Bạn có 4 lựa chọn, lần sử dụng cuối cùng dangerouslySetInnerHTML.

Phương thức kết xuất HTML

1. Dễ nhất - Sử dụng Unicode, lưu tệp dưới dạng UTF-8 và đặt thành charsetUTF-8.

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

2. An toàn hơn - Sử dụng số Unicode cho thực thể bên trong chuỗi Javascript.

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

   hoặc là

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

3. Hoặc một mảng hỗn hợp với các chuỗi và các phần tử JSX.

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

4. Phương sách cuối cùng - Chèn HTML thô bằng cách sử dụng dangerouslySetInnerHTML.

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

Tôi đã sử dụng điều này trong các tình huống nhanh chóng và bẩn thỉu:

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

Tôi đã thử thành phần tinh khiết này:

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

Đặc trưng

• Đưa classNameprop (dễ dàng hơn để tạo kiểu cho nó)
• Thay thế \ncho <br />(bạn thường muốn làm điều đó)
• Đặt nội dung như trẻ em khi sử dụng thành phần như:
• <RawHTML>{myHTML}</RawHTML>

Tôi đã đặt thành phần này trong Gist tại Github: RawHTML: ReactJS thành phần thuần túy để kết xuất HTML

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

nguy hiểm SetInnerHTML là sự thay thế của React để sử dụng InternalHTML trong DOM trình duyệt. Nói chung, việc thiết lập HTML từ mã rất rủi ro vì việc vô tình khiến người dùng của bạn gặp phải một cuộc tấn công kịch bản chéo trang (XSS).

Sẽ tốt hơn / an toàn hơn khi vệ sinh HTML thô của bạn (sử dụng ví dụ: DOMPurify) trước khi đưa nó vào DOM thông qua dangerouslySetInnerHTML.

DOMPurify - một công cụ khử trùng XSS chỉ dành cho DOM, siêu nhanh, dung nạp uber cho HTML, MathML và SVG. DOMPurify hoạt động với một mặc định an toàn, nhưng cung cấp rất nhiều cấu hình và hook.

Ví dụ :

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

Tôi đã sử dụng thư viện này được gọi là Parser . Nó làm việc cho những gì tôi cần.

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

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

dangerouslySetInnerHTMLkhông nên được sử dụng trừ khi thực sự cần thiết Theo các tài liệu, "Điều này chủ yếu để hợp tác với các thư viện thao tác chuỗi DOM" . Khi bạn sử dụng nó, bạn sẽ từ bỏ lợi ích của việc quản lý DOM của React.

Trong trường hợp của bạn, việc chuyển đổi thành cú pháp JSX hợp lệ là khá đơn giản; chỉ cần thay đổi classthuộc tính thành className. Hoặc, như đã đề cập trong các ý kiến ​​ở trên, bạn có thể sử dụng thư viện ReactBootstrap đóng gói các phần tử Bootstrap thành các thành phần React.

Đây là một phiên bản ít quan tâm hơn của chức năng RawHTML được đăng trước đó. Nó cho phép bạn:

• cấu hình thẻ
• tùy chọn thay thế các dòng mới thành <br />của
• vượt qua các đạo cụ bổ sung mà RawHTML sẽ chuyển đến phần tử đã tạo
• cung cấp một chuỗi rỗng ( RawHTML></RawHTML>)

Đây là thành phần:

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,
};

Sử dụng:

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

Đầu ra:

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

Nó sẽ phá vỡ:

<RawHTML><h1>First &middot; Second</h1></RawHTML>

Tôi cần sử dụng một liên kết với thuộc tính onLoad trong đầu, nơi div không được phép vì vậy điều này gây cho tôi nỗi đau đáng kể. Cách giải quyết hiện tại của tôi là đóng thẻ script gốc, làm những gì tôi cần làm, sau đó mở thẻ script (để được đóng bởi bản gốc). Hy vọng điều này có thể giúp một người hoàn toàn không có lựa chọn nào khác:

<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>`,}}/>