web-dev-qa-db-fra.com

Comment rendre un commentaire HTML dans React?

Actuellement, la méthode de rendu ne peut renvoyer qu'un seul élément/composant. Voir: ici

Dans la discussion sous ce billet, certains suggèrent d'encapsuler plusieurs éléments renvoyés par un composant React dans un commentaire HTML afin que le composant d'habillage soit ignoré par le navigateur.

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

rendrait à:

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

Mais comment créer réellement un composant qui ne rend que des commentaires HTML? En d'autres termes, à quoi pourrait ressembler la fonction de rendu du composant 'fragment' dans l'exemple ci-dessus?

javascripthtml5domreactjsreact-jsx
13
Amiramix

C'est ce que j'ai abouti dans l'un de mes projets récents:

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;

Donc, vous pouvez l'utiliser comme ceci:

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

La façon dont vous envisagez de faire cela ne fonctionnera pas avec une solution simple Vanilla React. Cependant, vous pouvez définir un composant Web personnalisé qui se convertit en commentaires HTML et le renvoyer depuis un wrapper React. Un exemple de composant est implémenté here . Pour une utilisation dans React, reportez-vous à this url .

Mise à jour du 19/01/2017

Donc, ceci est une théorie non testée, mais le composant Web peut être quelque chose comme

/**
 * `<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> -->
   ```
 */
class CommentSentinel extends HTMLElement {
  get name() {
    return 'React HTML Comment';
  }

  createdCallback() {
    /**
     * Firefox fix, is="null" prevents attachedCallback
     * @link https://github.com/WebReflection/document-register-element/issues/22
     */
    this.is = '';
    this.removeAttribute('is');
  }

  attachedCallback() {
    const tag = this.getAttribute('sentinel');

    this.outerHTML = `
      <!-- <${tag}> -->
        ${this.innerHTML}
      <!-- </${tag}> -->
    `;
  }
}

document.registerElement('react-comment-sentinel', CommentSentinel);

Notez que les enfants intérieurs sont html, pas React. Cependant, vous pouvez également essayer d’améliorer le code pour supporter React Components .

0
hazardous