Update wording and style for #2065
Ben Alpert committed
Sep 3, 2015 at 16:59 UTC
9d93693b2e668a7d33e33083aa04909bebc58ec2
3 files changed
+44
-36
src/renderers/dom/client/ReactMount.js
+34
-29
@@ -351,6 +351,22 @@ function unmountComponentFromNode(instance, container) {
351
}
352
}
353
354
+/**
355
+ * True if the supplied DOM node has a direct React-rendered child that is
356
+ * not a React root element. Useful for warning in `render`,
357
+ * `unmountComponentAtNode`, etc.
358
+ *
359
+ * @param {?DOMElement} node The candidate DOM node.
360
+ * @return {boolean} True if the DOM element contains a direct child that was
361
+ * rendered by React but is not a root element.
362
+ * @internal
363
+ */
364
+function hasNonRootReactChild(node) {
365
+ var reactRootID = getReactRootID(node);
366
+ return reactRootID ? reactRootID !==
367
+ ReactInstanceHandles.getReactRootIDFromNodeID(reactRootID) : false;
368
+}
369
+
370
/**
371
* Temporary (?) hack so that we can store all top-level pending updates on
372
* composites instead of having to worry about different types of components
@@ -587,14 +603,15 @@ var ReactMount = {
603
var reactRootElement = getReactRootElementInContainer(container);
604
var containerHasReactMarkup =
605
reactRootElement && ReactMount.isRenderedByReact(reactRootElement);
590
- var containerHasNonRootReactChild =
591
- ReactMount.hasNonRootReactChild(container);
606
+ var containerHasNonRootReactChild = hasNonRootReactChild(container);
607
608
if (__DEV__) {
609
warning(
610
!containerHasNonRootReactChild,
596
- 'renderComponent(...): Replacing React-rendered children with a new ' +
597
- 'root component.'
611
+ 'render(...): Replacing React-rendered children with a new root ' +
612
+ 'component. If you intended to update the children of this node, ' +
613
+ 'you should instead have the existing children update their state ' +
614
+ 'and render the new components instead of calling ReactDOM.render.'
615
);
616
617
if (!containerHasReactMarkup || reactRootElement.nextSibling) {
@@ -709,23 +726,27 @@ var ReactMount = {
726
if (!component) {
727
// Check if the node being unmounted was rendered by React, but isn't a
728
// root node.
712
- var containerHasNonRootReactChild = ReactMount.hasNonRootReactChild(
713
- container);
729
+ var containerHasNonRootReactChild = hasNonRootReactChild(container);
730
731
// Check if the container itself is a React root node.
716
- var containerID = ReactMount.getID(container);
717
- var containerRootID = ReactInstanceHandles.getReactRootIDFromNodeID(
718
- containerID);
732
+ var containerID = internalGetID(container);
733
var isContainerReactRoot =
720
- containerID && containerRootID && containerID === containerRootID;
734
+ containerID &&
735
+ containerID ===
736
+ ReactInstanceHandles.getReactRootIDFromNodeID(containerID);
737
738
if (__DEV__) {
739
warning(
740
!containerHasNonRootReactChild,
741
'unmountComponentAtNode(): The node you\'re attempting to unmount ' +
726
- 'is not a valid React root node, and thus cannot be unmounted.%s',
727
- (isContainerReactRoot ? ' You may have passed in a React root ' +
728
- 'node as argument, rather than its container.' : '')
742
+ 'was rendered by React and is not a top-level container. %s',
743
+ (
744
+ isContainerReactRoot ?
745
+ 'You may have accidentally passed in a React root node instead ' +
746
+ 'of its container.' :
747
+ 'Instead, have the parent component update its state and ' +
748
+ 'rerender in order to remove this component.'
749
+ )
750
);
751
}
752
@@ -813,22 +834,6 @@ var ReactMount = {
834
return id ? id.charAt(0) === SEPARATOR : false;
835
},
836
816
- /**
817
- * True if the supplied DOM node has a direct React-rendered child that is
818
- * not a React root element. Useful for warning in renderComponent`,
819
- * `unmountComponentAtNode`, etc.
820
- *
821
- * @param {?DOMElement} node The candidate DOM node.
822
- * @return {boolean} True if the DOM element contains a direct child that was
823
- * rendered by React but is not a root element.
824
- * @internal
825
- */
826
- hasNonRootReactChild: function(node) {
827
- var reactRootID = getReactRootID(node);
828
- return reactRootID ? reactRootID !==
829
- ReactInstanceHandles.getReactRootIDFromNodeID(reactRootID) : false;
830
- },
831
-
837
/**
838
* Traverses up the ancestors of the supplied node to find a node that is a
839
* DOM representation of a React component.
src/renderers/dom/client/__tests__/ReactMount-test.js
+4
-2
@@ -240,8 +240,10 @@ describe('ReactMount', function() {
240
React.render(<span />, rootNode);
241
expect(console.error.callCount).toBe(1);
242
expect(console.error.mostRecentCall.args[0]).toBe(
243
- 'Warning: renderComponent(...): Replacing React-rendered children ' +
244
- 'with a new root component.'
243
+ 'Warning: render(...): Replacing React-rendered children with a new ' +
244
+ 'root component. If you intended to update the children of this node, ' +
245
+ 'you should instead have the existing children update their state and ' +
246
+ 'render the new components instead of calling ReactDOM.render.'
247
);
248
});
249
});
src/renderers/dom/client/__tests__/ReactMountDestruction-test.js
+6
-5
@@ -56,9 +56,9 @@ describe('ReactMount', function() {
56
expect(console.error.callCount).toBe(1);
57
expect(console.error.mostRecentCall.args[0]).toBe(
58
'Warning: unmountComponentAtNode(): The node you\'re attempting to ' +
59
- 'unmount is not a valid React root node, and thus cannot be ' +
60
- 'unmounted. You may have passed in a React root node as argument, ' +
61
- 'rather than its container.'
59
+ 'unmount was rendered by React and is not a top-level container. You ' +
60
+ 'may have accidentally passed in a React root node instead of its ' +
61
+ 'container.'
62
);
63
});
64
@@ -80,8 +80,9 @@ describe('ReactMount', function() {
80
expect(console.error.callCount).toBe(1);
81
expect(console.error.mostRecentCall.args[0]).toBe(
82
'Warning: unmountComponentAtNode(): The node you\'re attempting to ' +
83
- 'unmount is not a valid React root node, and thus cannot be ' +
84
- 'unmounted.'
83
+ 'unmount was rendered by React and is not a top-level container. ' +
84
+ 'Instead, have the parent component update its state and rerender in ' +
85
+ 'order to remove this component.'
86
);
87
});
88
});