Temporarily fix EmptyComponents
This a workaround for the problem described in #2770. It should be temporary because this is really just working around the real problem.
Paul O’Shannessy committed
Dec 23, 2014 at 15:33 UTC
b2bf83ec854d697c4e50c738538fb49f32a3eb38
2 files changed
+45
src/core/ReactEmptyComponent.js
+11
@@ -30,10 +30,21 @@ var ReactEmptyComponentInjection = {
30
var ReactEmptyComponentType = function() {};
31
ReactEmptyComponentType.prototype.componentDidMount = function() {
32
var internalInstance = ReactInstanceMap.get(this);
33
+ // TODO: Make sure we run these methods in the correct order, we shouldn't
34
+ // need this check. We're going to assume if we're here it means we ran
35
+ // componentWillUnmount already so there is no internal instance (it gets
36
+ // removed as part of the unmounting process).
37
+ if (!internalInstance) {
38
+ return;
39
+ }
40
registerNullComponentID(internalInstance._rootNodeID);
41
};
42
ReactEmptyComponentType.prototype.componentWillUnmount = function() {
43
var internalInstance = ReactInstanceMap.get(this);
44
+ // TODO: Get rid of this check. See TODO in componentDidMount.
45
+ if (!internalInstance) {
46
+ return;
47
+ }
48
deregisterNullComponentID(internalInstance._rootNodeID);
49
};
50
ReactEmptyComponentType.prototype.render = function() {
src/core/__tests__/ReactEmptyComponent-test.js
+34
@@ -231,4 +231,38 @@ describe('ReactEmptyComponent', function() {
231
'Invariant Violation: React.render(): Invalid component element.'
232
);
233
});
234
+
235
+ it('does not break when updating during mount', function() {
236
+ var Child = React.createClass({
237
+ componentDidMount() {
238
+ this.props.onMount && this.props.onMount();
239
+ },
240
+ render() {
241
+ if (!this.props.visible) {
242
+ return null;
243
+ }
244
+
245
+ return <div>hello world</div>;
246
+ }
247
+ });
248
+
249
+ var Parent = React.createClass({
250
+ update() {
251
+ this.forceUpdate();
252
+ },
253
+ render() {
254
+ return (
255
+ <div>
256
+ <Child key="1" visible={false} />
257
+ <Child key="0" visible={true} onMount={this.update} />
258
+ <Child key="2" visible={false} />
259
+ </div>
260
+ );
261
+ }
262
+ });
263
+
264
+ expect(function() {
265
+ ReactTestUtils.renderIntoDocument(<Parent/>)
266
+ }).not.toThrow();
267
+ });
268
});