-
-
Save alexeychikk/bfe72a072a9a962f2da900b6151e4aae to your computer and use it in GitHub Desktop.
| /* | |
| Usage (I however think that the code is self explanatory) | |
| <ReactComment text={` | |
| Very long comment with html link | |
| <a href="https://gist.github.com/alexeychikk/bfe72a072a9a962f2da900b6151e4aae">Star me :)</a> | |
| `} /> | |
| */ | |
| 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; |
1:1 warning React.PropTypes is deprecated since React 15.5.0, use the npm module prop-types instead react/no-deprecated
✖ 1 problem (0 errors, 1 warning)
Meh :/
What's the point of dynamically generating comments?
Either the comments are for humans (and they'd be JSX comments) or for the browsers, like the IE conditional comments (and we need them to appear even before the html tag).
Some people hide stack traces inside comments to help support people to analyze those later on; and yes, they might be smarter options, but some (esp. large) projects got used to it
Meh :/
What's the point of dynamically generating comments?
Either the comments are for humans (and they'd be JSX comments) or for the browsers, like the IE conditional comments (and we need them to appear even before the html tag).
Not ALL IE conditional tags happen before the <html>-- <picture> for example, has an IE hack as well...
<picture >
<!--[if IE 9]><video style="display: none"><![endif]--></video>
Meh :/
What's the point of dynamically generating comments?
Either the comments are for humans (and they'd be JSX comments) or for the browsers, like the IE conditional comments (and we need them to appear even before the html tag).
Look up how InfoLinks asks you to help them determine where to insert Ads.
Just as a note, this does not work when using renderToStaticMarkup of react-dom/server, because componentDidMount does not get triggered. For reference: facebook/react#16931
For me generating comments is required, not only "inside the browser" but when using react as some part of static-file-generation outside of the browser.
Just as a note, this does not work when using
renderToStaticMarkupofreact-dom/server, becausecomponentDidMountdoes not get triggered. For reference: facebook/react#16931For me generating comments is required, not only "inside the browser" but when using react as some part of static-file-generation outside of the browser.
@alexeychikk That won't work, as it always creates a wrapper-element
This causes a crash for me when navigating with react-router-dom to a component where ReactComment is not used.
I have made an npm package for this: https://www.npmjs.com/package/react-html-comment
Meh :/
What's the point of dynamically generating comments?
Either the comments are for humans (and they'd be JSX comments) or for the browsers, like the IE conditional comments (and we need them to appear even before the html tag).