javascript - paginas - hacer pagina web con react js

¿Cómo hacer un comentario en HTML en React?

Question

Actualmente, el método de renderización solo puede devolver un único elemento / componente. Ver: aquí

En la discusión debajo de ese boleto, algunos sugieren envolver múltiples elementos devueltos desde un componente React en un comentario HTML para que el componente de envoltura sea ignorado por el navegador, por ejemplo:

<A>
    <B></B>
    <Fragment>
        <C></C>
        <D></D>
    </Fragment>
    <E></E>
</A>

rendiría a:

<a>
    <b></b>
    <!--<fragment data-reactid="">-->
        <c></c>
        <d></d>
    <!--</fragment>-->
    <e></e>
</a>

¿Pero cómo crear realmente un componente que represente solo el comentario HTML? En otras palabras, ¿cómo podría verse la función de renderización del componente ''fragmento'' en el ejemplo anterior?

Answer 1

Esto es con lo que terminé en uno de mis proyectos recientes:

import React, {Component, PropTypes} from ''react'';
import ReactDOM from ''react-dom'';

class ReactComment extends Component {
    static propTypes = {
        text: PropTypes.string,
        trim: PropTypes.bool
    };

    static defaultProps = {
        trim: true
    };

    componentDidMount() {
        let el = ReactDOM.findDOMNode(this);
        ReactDOM.unmountComponentAtNode(el);
        el.outerHTML = this.createComment();
    }

    createComment() {
        let text = this.props.text;

        if (this.props.trim) {
            text = text.trim();
        }

        return `<!-- ${text} -->`;
    }

    render() {
        return <div />;
    }
}

export default ReactComment;

Entonces puedes usarlo así:

<A>
    <B></B>
    <ReactComment text="<fragment>" />
        <C></C>
        <D></D>
     <ReactComment text="</fragment>" />
    <E></E>
</A>

Answer 2

La forma en que planea hacer esto no funcionará con una solución simple de Reaccionar de vainilla. Sin embargo, puede definir un componente web personalizado que convierta en comentarios HTML y devolverlo desde un contenedor React. Un componente de ejemplo se implementa aquí . Para el uso en React, consulte esta url .

Actualización 19/01/2017

Entonces esta es una teoría no probada, pero el componente web puede ser algo así como ...

`` `

 /**
 * <react-comment-sentinel> Web Component
 *
 * @usage
 *  <react-comment-sentinel sentinel="fragment"><div>Hello there!</div></react-comment-sentinel>

 * @result
 *  <!-- <fragment> --><div>Hello there!</div><!-- </fragment> -->
 */
var proto = Object.create(HTMLElement.prototype, {
 name: { get: function() { return ''React HTML Comment''; } },
 createdCallback: { value: function() {

  /**
   * Firefox fix, is="null" prevents attachedCallback
   * @link https://github.com/WebReflection/document-register-element/issues/22
   */
  this.is = '''';
  this.removeAttribute(''is'');
 } },
 attachedCallback: { value: function() {
  var tag = this.attributes("sentinel");
  this.outerHTML = ''<!-- <'' + tag + ''> -->'' + this.innerHtml + ''<!-- </'' + tag + ''> -->'';
 } }
});
document.registerElement(''react-comment-sentinel'', { prototype: proto });

`` `

Tenga en cuenta que los niños internos son simples html, no Reaccionan. Sin embargo, puedes experimentar mejorando el código para admitir también los componentes React .

Answer 3

Use corchetes, de manera que pueda usar javascript comment /* */ .

<a>
    <b></b>
    {/*<fragment data-reactid="">*/}
        <c></c>
        <d></d>
    {/*</fragment>*/}
    <e></e>
</a>