-
-
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; |
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
renderToStaticMarkup
ofreact-dom/server
, becausecomponentDidMount
does 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
Look up how InfoLinks asks you to help them determine where to insert Ads.