Rendern von rohem HTML mit Reactjs

Ist dies also die einzige Möglichkeit, rohes HTML mit Reactjs zu rendern?

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

Ich weiß, dass es einige coole Möglichkeiten gibt, Dinge mit JSX zu markieren, aber ich bin hauptsächlich daran interessiert, rohes HTML (mit allen Klassen, Inline-Stilen usw.) rendern zu können. So etwas Kompliziertes:

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

Ich möchte das alles nicht in JSX neu schreiben müssen.

Vielleicht denke ich da ganz falsch. Bitte korrigieren Sie mich.

Es gibt jetzt sicherere Methoden zum Rendern von HTML. Ich habe dies in einer früheren Antwort hier behandelt. Sie haben 4 Möglichkeiten, die letzten verwendet dangerouslySetInnerHTML.

Methoden zum Rendern von HTML

1. Am einfachsten – Verwenden Sie Unicode, speichern Sie die Datei als UTF-8 und legen Sie die charset zu UTF-8.

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

2. Sicherer – Verwenden Sie die Unicode-Nummer für die Entität innerhalb einer Javascript-Zeichenfolge.

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

   oder

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

3. Oder ein gemischtes Array mit Strings und JSX-Elementen.

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

4. Letzter Ausweg – Fügen Sie rohes HTML ein mit dangerouslySetInnerHTML.

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

Sie könnten die nutzen html-to-react npm-Modul.

Hinweis: Ich bin der Autor des Moduls und habe es erst vor wenigen Stunden veröffentlicht. Bitte zögern Sie nicht, Fehler oder Probleme mit der Benutzerfreundlichkeit zu melden.

gefährlichSetInnerHTML ist Reacts Ersatz für die Verwendung von innerHTML im Browser-DOM. Im Allgemeinen ist das Festlegen von HTML aus Code riskant, da Ihre Benutzer leicht versehentlich einem Cross-Site-Scripting-Angriff (XSS) ausgesetzt werden können.

Es ist besser/sicherer, Ihr rohes HTML zu bereinigen (z. B. mit DOMPurify), bevor Sie es in das DOM über injizieren dangerouslySetInnerHTML.

DOMreinigen – ein DOM-exklusiver, superschneller, übertoleranter XSS-Reiniger für HTML, MathML und SVG. DOMPurify arbeitet mit einem sicheren Standard, bietet aber viele Konfigurierbarkeiten und Hooks.

Beispiel:

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

Ich habe dies in schnellen und schmutzigen Situationen verwendet:

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

Ich habe diese reine Komponente ausprobiert:

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

Merkmale

• Dauert classNameRequisite (einfacher zu stylen)
• Ersetzt \n zu <br /> (das will man oft machen)
• Inhalt platzieren als Kinder bei Verwendung der Komponente wie:
• <RawHTML>{myHTML}</RawHTML>

Ich habe die Komponente in einem Gist bei Github platziert: RawHTML: Reine ReactJS-Komponente zum Rendern von 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>
            )
    }
}

ich benutzte diese Bibliothek namens Parser. Es funktionierte für das, was ich brauchte.

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

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