How to make HTML comment in React?

Question

Currently, the render method can only return one element / component. See: here

In the discussion on this ticket, some suggest wrapping several elements returned from the React component in an HTML comment so that the browser does not ignore the packaging component, for example:

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

will give out:

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

But how to actually create a component that displays only HTML comment? In other words, what would the rendering function of the fragment component look like in the above example?

Answer 1

Here is what I got in one of my recent projects:

 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 you can use it as follows:

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

Answer 2

The way you plan to do this will not work with a simple vanilla solution. However, you can define a custom web component that converts to HTML comments and returns this from the React shell. An example component is implemented here . For use in React, see this URL .

Update 01/19/2017

So this is an unverified theory, but the web component may be something like -

`` ``

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

`` ``

Note that inner children are plain html, not React. However, you can experiment with the code extension to support React Components .

Answer 3

Assuming you are working in React 16. 8+, you can use a small functional component that allows you to provide a text property and make an HTML comment.

 import React, {useEffect, useRef} from 'react'; const ReactComment = ( props ) => { const el = useRef(); useEffect( () => { el.current.outerHTML = '<!-- ${props.text} -->'; }, [] ); return ( <div ref={el}/> ); }; export default ReactComment; 

Then you can use it like this

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

Answer 4

Here's another groundbreaking approach if you need it to work with SSR.

Here I use the MaxWidth component with my email tool Myza .

 import ReactDOMServer from 'react-dom/server' export const MaxWidth = ({ maxWidth = 0, className, children }: IMaxWidthProps) => { const renderedChildren = ReactDOMServer.renderToStaticMarkup( <div className={className} style={{ maxWidth: '${maxWidth}px', margin: '0 auto' }}> {children} </div> ) return <div dangerouslySetInnerHTML={{ __html: ' <!--[if mso]><center><table><tr><td width="${maxWidth}"><![endif]--> ${renderedChildren} <!--[if mso]> </td></tr></table></center><![endif]--> ' }} /> } 

Answer 5

Edit: For those who find this answer helpful, check out this answer instead!

Published issue does not require comment style in React!

---

Use curly braces so you can use javascript comment /* */ .

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