แสดงผล html ดิบด้วย reactjs

นี่เป็นวิธีเดียวที่จะแสดงผล 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 แบบ raw (ด้วยคลาสทั้งหมด, สไตล์อินไลน์, ฯลฯ ) บางสิ่งที่ซับซ้อนเช่นนี้:

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

หมายเหตุ: ฉันเป็นผู้เขียนโมดูลและเพิ่งเผยแพร่เมื่อไม่กี่ชั่วโมงที่ผ่านมา โปรดรายงานข้อผิดพลาดหรือปัญหาการใช้งาน

ขณะนี้มีวิธีที่ปลอดภัยกว่าในการแสดงผล HTML ฉันปกคลุมนี้ในคำตอบก่อนหน้านี่ คุณมี 4 dangerouslySetInnerHTMLตัวเลือกการใช้งานที่ผ่านมา

วิธีการในการแสดง HTML

1. ง่ายที่สุด - ใช้ Unicode บันทึกไฟล์เป็น UTF-8 และตั้งค่าเป็นcharsetUTF-8

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

2. ปลอดภัยยิ่งขึ้น - ใช้หมายเลข Unicode สำหรับเอนทิตีภายในสตริง Javascript

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

   หรือ

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

3. หรืออาร์เรย์แบบผสมพร้อมสตริงและองค์ประกอบ JSX

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

4. ล่าสุดรีสอร์ท - แทรกดิบ HTML dangerouslySetInnerHTMLใช้

   <div dangerouslySetInnerHTML={{__html: 'First &middot; 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 />')}} />

คุณสมบัติ

• ใช้classNameprop (จัดวางง่ายกว่า)
• แทนที่\nเป็น<br />(คุณมักต้องการทำเช่นนั้น)
• วางเนื้อหาเป็นเด็ก ๆเมื่อใช้องค์ประกอบเช่น:
• <RawHTML>{myHTML}</RawHTML>

ฉันได้วางองค์ประกอบใน Gist ที่ Github: RawHTML: ReactJS pure component เพื่อแสดง 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>
            )
    }
}

dangerouslySetInnerHTMLเป็น React ทดแทนสำหรับใช้ innerHTML ใน DOM เบราว์เซอร์ โดยทั่วไปแล้วการตั้งค่า HTML จากรหัสนั้นมีความเสี่ยงเพราะเป็นการง่ายที่จะทำให้ผู้ใช้ของคุณถูกโจมตีแบบข้ามไซต์ (XSS)

มันจะดีกว่า / ปลอดภัยในการ sanitize HTML ของคุณดิบ (ใช้เช่น DOMPurify) ก่อนที่จะฉีดเข้าไปใน DOM dangerouslySetInnerHTMLผ่าน

DOMPurify - น้ำยาฆ่าเชื้อ XSS ที่รวดเร็วและเหนือกว่าและทนทานสำหรับ XSS สำหรับ HTML, MathML และ SVG DOMPurify ทำงานได้กับการเริ่มต้นที่ปลอดภัย แต่มีการกำหนดค่าและ hooks จำนวนมาก

ตัวอย่าง :

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

ผมใช้ห้องสมุดนี้เรียกว่าตัวแยกวิเคราะห์ มันใช้ได้กับสิ่งที่ฉันต้องการ

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

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

dangerouslySetInnerHTMLไม่ควรใช้เว้นแต่จำเป็นจริงๆ ตามเอกสาร, "นี่เป็นส่วนใหญ่สำหรับการประสานงานกับ DOM ห้องสมุดสตริงการจัดการ" เมื่อคุณใช้คุณจะได้รับผลประโยชน์จากการจัดการ DOM ของ React

ในกรณีของคุณมันค่อนข้างตรงไปตรงมาที่จะแปลงเป็นไวยากรณ์ 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>`,}}/>