JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<div id="test"></div>
JavaScript
var d = React.DOM;
var Parent = React.createClass({
render() {
return d.div(null,
d.h1(null, 'Parent'),
this.props.children);
}
});
var Child = React.createClass({
render() {
// return undefined to cause Invariant Violation error
// any error thrown here will have the same effect as returning undefined
return;
}
});
var P = React.createFactory(Parent),
C = React.createFactory(Child);
var mount = document.getElementById('test');
try {
// This throws an Invariant Violation error which is expected
React.render(P(null, C()), mount);
} catch (e) {
// This renders without an error
React.render(P(null), mount);
setTimeout(function () {
// This also throws an Invariant Violation error which is expected
React.render(P(null, C()), mount);
}, 500);
setTimeout(function () {
// This throws
// -> Uncaught TypeError: Cannot read property '_currentElement' of null
React.render(d.h1(null, 'ayy'), mount);
// And now you can't use React anymore on mount element, all React functions won't work
// on that element, try them in the console
// React.render(React.DOM.p(null, 'test'), document.getEelementById('test'));
// -> Uncaught TypeError: Cannot read property '_currentElement' of null
// React.unmountComponentAtNode(document.getElementById('test')
// -> Uncaught TypeError: Cannot read property '_currentElement' of null
}, 1000);
}