Wie Rendern eines HTML-Kommentars in React?

Question

Derzeit kann die Rendermethode nur ein einzelnes Element/eine einzelne Komponente zurückgeben. Siehe: here

In der Diskussion unter diesem Ticket einige von einem Reagieren Komponente in einem HTML-Kommentar wieder mehr Elemente wickeln vorschlagen, so dass die Verpackung Komponente vom Browser ignoriert wird, zB:

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

machen würde zu:

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

Aber wie erstellt man tatsächlich eine Komponente, die nur HTML-Kommentar rendert? Mit anderen Worten, wie könnte die Renderfunktion der 'Fragment'-Komponente im obigen Beispiel aussehen?

Answer 1

Dies ist, was ich mit einem meiner letzten Projekte gelandet sind:

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

Answer 2

Die Art und Weise Sie planen, diese gewonnen zu tun:

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; 

So können Sie es wie folgt verwenden arbeite nicht mit einer Plain-Vanilla-React-Lösung. Sie können jedoch eine benutzerdefinierte Webkomponente definieren, die in HTML-Kommentare konvertiert und diese innerhalb eines React-Wrappers zurückgibt. Eine Beispielkomponente ist implementiert here. Informationen zur Verwendung in React finden Sie unter this url.

aktualisieren 19/01/2017

Das ist also nicht getestete Theorie, aber die Web-Komponente kann wie etwas sein -

`` `

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

` ``

Beachten Sie, dass die inneren Kinder einfach HTML sind, nicht Reagieren. Sie können jedoch auch experimentieren, indem Sie den Code auf support React Components erweitern.

Answer 3

Verwenden Sie geschweifte Klammern, so dass Sie Javascript-Kommentar /* */ verwenden können.

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