Pregunta Renderizado de html en bruto con reactjs


Entonces, ¿es esta la única forma de renderizar html en bruto con 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>
    );
  }
});

Sé que hay algunas formas geniales de marcar cosas con JSX, pero estoy interesado principalmente en poder procesar html sin formato (con todas las clases, estilos en línea, etc.). Algo complicado como esto:

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

No me gustaría tener que reescribir todo eso en JSX.

Tal vez estoy pensando en todo esto mal. Por favor corrigeme.


74
2018-01-14 01:01


origen


Respuestas:


Podría aprovechar el html-to-react módulo npm en https://www.npmjs.com/package/html-to-react.

Nota: soy el autor del módulo y lo acabo de publicar hace unas horas. Por favor, siéntase libre de informar cualquier error o problema de usabilidad.


19
2018-06-21 00:02



Ahora hay métodos más seguros para procesar HTML. Cubrí esto en una respuesta anterior aquí. Tienes 4 opciones, los últimos usos dangerouslySetInnerHTML.

Métodos para renderizar HTML

  1. Más fácil - Use Unicode, guarde el archivo como UTF-8 y configure el charset a UTF-8.

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

  2. Más seguro - Use el número Unicode para la entidad dentro de una cadena de Javascript.

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

    o

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

  3. O una matriz mixta con cadenas y elementos JSX.

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

  4. Último recurso - Insertar HTML sin formato usando dangerouslySetInnerHTML.

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


103
2018-01-15 07:41



Lo he usado en situaciones rápidas y sucias:

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

11
2018-01-31 22:32



He probado este componente puro:

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

Caracteristicas 

  • Toma classNameprop (más fácil de darle estilo)
  • Reemplaza \n a <br /> (a menudo quieres hacer eso)
  • Coloca el contenido como niños cuando se usa el componente como:
  • <RawHTML>{myHTML}</RawHTML>

He colocado el componente en una Gist en Github: RawHTML: componente puro ReactJS para renderizar HTML 


8
2017-08-22 06:31



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
2018-03-18 02:45



dangerouslySetInnerHTML no debe usarse a menos que sea absolutamente necesario. De acuerdo con los documentos, "Esto es principalmente para cooperar con las bibliotecas de manipulación de cadenas DOM". Cuando lo usa, renuncia al beneficio de la administración de DOM de React.

En su caso, es bastante sencillo convertir a sintaxis válida de JSX, simplemente cambie class atributos para className. O, como se menciona en los comentarios anteriores, puede usar ReactBootstrap biblioteca que encapsula elementos Bootstrap en componentes React


3
2018-01-14 12:58



Aquí hay una versión menos dogmática de la función RawHTML publicada anteriormente. Te deja:

  • configurar la etiqueta
  • opcionalmente reemplace las nuevas líneas por <br />es
  • pasar elementos adicionales que RawHTML pasará al elemento creado
  • suministrar una cadena vacía (RawHTML></RawHTML>)

Este es el 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>

Salida:

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

Se romperá en:

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

0
2017-07-11 11:58