प्रतिक्रिया में एक HTML टिप्पणी कैसे प्रस्तुत करें?

Question

वर्तमान में रेंडर विधि केवल एक तत्व/घटक लौटा सकती है। देखें: here

चर्चा में है कि टिकट के तहत कुछ जैसे एक HTML टिप्पणी में एक प्रतिक्रिया घटक से लौटे एक से अधिक तत्वों रैप करने के लिए सुझाव है ताकि रैपिंग घटक ब्राउज़र द्वारा नजरअंदाज कर दिया है,:

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

प्रस्तुत करना होगा करने के लिए:

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

लेकिन वास्तव में एक घटक कैसे बनाएं जो केवल HTML टिप्पणी प्रस्तुत करता हो? दूसरे शब्दों में, ऊपर दिए गए उदाहरण में 'खंड' घटक का कार्य कैसे प्रस्तुत किया जा सकता है?

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; 

तो आप इसे इस प्रकार उपयोग कर सकते हैं:

Answer 1

यह है कि मैं क्या मेरी हाल ही में परियोजनाओं में से एक के साथ समाप्त हो गया है

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

Answer 2

जिस तरह से आप यह जीता करने के लिए योजना बना रहे हैं एक सादा वेनिला प्रतिक्रिया समाधान के साथ काम नहीं करते हैं। हालांकि, आप एक कस्टम वेब घटक को परिभाषित कर सकते हैं जो HTML टिप्पणियों में परिवर्तित हो जाता है और इसे एक रिएक्ट रैपर के भीतर से वापस कर देता है। एक उदाहरण घटक here लागू किया गया है। प्रतिक्रिया में उपयोग के लिए, this url देखें।

अद्यतन 19/01/2017

तो यह अपरीक्षित सिद्धांत है, लेकिन वेब घटक की तरह कुछ हो सकता है -

`` `

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

` ``

ध्यान दें कि आंतरिक बच्चे सादे एचटीएमएल हैं, प्रतिक्रिया नहीं। हालांकि, आप कोड को support React Components पर बढ़ाने के साथ भी प्रयोग कर सकते हैं।

Answer 3

उपयोग कर्ली कोष्ठक, इस तरह है कि आप जावास्क्रिप्ट टिप्पणी /* */ उपयोग कर सकते हैं।

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