Como apresentar um comentário HTML no Reat?

Question

Como apresentar um comentário HTML no Reat?

de momento, o método de desenho só pode devolver um único elemento / componente. Veja:

na discussão sob esse bilhete alguns sugerem embrulhar vários elementos devolvidos de um componente React num comentário em HTML para que o componente de embrulho seja ignorado pelo navegador, por exemplo:

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

renderia a:

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

mas como realmente criar um componente que torna apenas um comentário HTML? Por outras palavras, como funciona a função de renderização do componente "fragmento" no exemplo acima poderia parecer?

11

javascript html5 reactjs dom react-jsx

Author: Roberrrt, 2016-10-13

Source

3 answers

score 11 · Answer 1

Foi com isto que acabei num dos meus projectos recentes:

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;

Então podes usá - lo assim:

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

score 3 · Answer 2

Editar: para aqueles que acharam esta resposta útil, checkout esta Resposta em vez disso!

O problema postado não é pedir estilo de comentário em React!

Use parêntesis curly, para que possa usar o comentário do javascript /* */.

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

score 0 · Answer 3

A forma como planeias fazer isto não funciona com uma solução de reacção de baunilha. No entanto, você pode definir um componente Web personalizado que converte em comentários HTML e retornar isso de dentro de um wrapper Reat. Um componente de exemplo é implementado aqui . Para utilização no Reat, consulte este url .

Actualização 19/01/2017

Então esta é uma teoria não testada, mas o componente web pode ser algo 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 });

```

Notem que as crianças interiores são html simples, não reagem. No entanto, você pode experimentar melhorar o código para suporte componentes Reat também.