ReactにHTMLコメントを表示するには？

Question

現在、レンダリングメソッドは単一の要素/コンポーネントのみを返すことができます。参照：here

を議論においてそのチケットの下でラッピングコンポーネントがブラウザによって無視されるように、いくつかは、例えば、HTMLのコメントで反応コンポーネントから返された複数の要素をラップすることをお勧め：

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

レンダリングうto：

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

実際にHTMLコメントだけを表示するコンポーネントを実際に作成するにはどうすればよいですか？言い換えれば、上記の例の 'fragment'コンポーネントのレンダリング機能はどのように見えるのでしょうか？

Answer 1

これは私が私の最近のプロジェクトのひとつになってしまったものです：

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; 

だから、あなたはこのようにそれを使用することができます：あなたはこのウォンを行うことを計画している

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

Answer 2

方法プレーンなバニラ反応液で作業する。ただし、HTMLコメントに変換してReactラッパーから返すカスタムWebコンポーネントを定義できます。コンポーネントの例はhereで実装されています。 Reactでの使用については、this urlを参照してください。

更新19/01/2017

だから、これは未テスト理論であるが、Webコンポーネントのようなものすることができます -

`` `

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

` ``

内部の子は、Reactではなく、プレーンhtmlであることに注意してください。ただし、コードをsupport React Componentsに拡張して試すこともできます。

Answer 3

javascriptコメント/* */を使用できるように、中括弧を使用します。

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