Rendering di html non elaborato con reazioni

Quindi è questo l'unico modo per eseguire il rendering di HTML html con un reattore?

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

So che ci sono alcuni modi fantastici per eseguire il markup delle cose con JSX, ma sono principalmente interessato a essere in grado di eseguire il rendering di HTML html (con tutte le classi, gli stili incorporati, ecc.). Qualcosa di complicato come questo:

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

Non vorrei riscrivere tutto ciò in JSX.

Forse sto pensando a questo tutto sbagliato. Per favore, correggimi.

È possibile sfruttare il html-to-reactmodulo npm.

Nota: sono l'autore del modulo e l'ho appena pubblicato poche ore fa. Non esitate a segnalare eventuali bug o problemi di usabilità.

Esistono ora metodi più sicuri per il rendering HTML. Ho coperto questo in una risposta precedente qui . Hai 4 opzioni, l'ultima utilizza dangerouslySetInnerHTML.

Metodi per il rendering HTML

1. Più semplice : utilizzare Unicode, salvare il file come UTF-8 e impostare charsetUTF-8.

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

2. Più sicuro : utilizzare il numero Unicode per l'entità all'interno di una stringa Javascript.

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

   o

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

3. O un array misto con stringhe ed elementi JSX.

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

4. Last Resort : inserisci HTML non elaborato utilizzando dangerouslySetInnerHTML.

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

L'ho usato in situazioni veloci e sporche:

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

Ho provato questo componente puro:

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

Caratteristiche

• Prende classNameprop (più facile da modellare)
• Sostituisce \na <br />(spesso vogliono fare quello)
• Posiziona i contenuti come bambini quando usi il componente come:
• <RawHTML>{myHTML}</RawHTML>

Ho inserito il componente in Gist in Github: RawHTML: componente puro di ReactJS per eseguire il rendering 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 è il sostituto di React per l'utilizzo di innerHTML nel DOM del browser. In generale, impostare HTML dal codice è rischioso perché è facile esporre inavvertitamente gli utenti a un attacco di cross-site scripting (XSS).

È meglio / più sicuro disinfettare il tuo HTML non elaborato (usando ad esempio DOMPurify) prima di iniettarlo nel DOM tramite dangerouslySetInnerHTML.

DOMPurify - un disinfettante XSS solo DOM, superveloce e super tollerante per HTML, MathML e SVG. DOMPurify funziona con un valore predefinito sicuro, ma offre molta configurabilità e hook.

Esempio :

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

Ho usato questa libreria chiamata Parser . Ha funzionato per quello che mi serviva.

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

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

dangerouslySetInnerHTMLnon dovrebbe essere usato se non assolutamente necessario. Secondo i documenti, "Questo è principalmente per cooperare con le librerie di manipolazione di stringhe DOM" . Quando lo usi, stai rinunciando al vantaggio della gestione DOM di React.

Nel tuo caso, è abbastanza semplice convertire in sintassi JSX valida; basta cambiare gli classattributi in className. Oppure, come menzionato nei commenti sopra, è possibile utilizzare la libreria ReactBootstrap che incapsula gli elementi Bootstrap nei componenti di React.

Ecco una versione un po 'meno supponente della funzione RawHTML pubblicata in precedenza. Ti permette di:

• configura il tag
• facoltativamente sostituire le nuove righe a <br />'s
• passare ulteriori oggetti di scena che RawHTML passerà all'elemento creato
• fornire una stringa vuota ( RawHTML></RawHTML>)

Ecco il componente:

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

Uso:

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

Produzione:

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

Si interromperà:

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

Avevo bisogno di utilizzare un link con l'attributo onLoad nella mia testa in cui div non è permesso, quindi questo mi ha causato un dolore significativo. La mia soluzione attuale è chiudere il tag di script originale, fare quello che devo fare, quindi aprire il tag di script (per essere chiuso dall'originale). Spero che questo possa aiutare qualcuno che non ha assolutamente altra scelta:

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