The library for web and native user interfaces.
Support rendering different components into same node
var container = ...; // some DOM node React.renderComponent(<div />, container); React.renderComponent(<span />, container); This should replace the rendered <div> with a <span>, effectively reconciling at the root level.
CommitSyncScript committed
Jun 4, 2013 at 12:17 UTC
100af48f53e292898562f76e0edc9fc7ce50b04e
2 files changed
+31
-5
src/core/ReactMount.js
+9
-5
@@ -106,11 +106,15 @@ var ReactMount = {
106
renderComponent: function(nextComponent, container) {
107
var prevComponent = instanceByReactRootID[getReactRootID(container)];
108
if (prevComponent) {
109
- var nextProps = nextComponent.props;
110
- ReactMount.scrollMonitor(container, function() {
111
- prevComponent.replaceProps(nextProps);
112
- });
113
- return prevComponent;
109
+ if (prevComponent.constructor === nextComponent.constructor) {
110
+ var nextProps = nextComponent.props;
111
+ ReactMount.scrollMonitor(container, function() {
112
+ prevComponent.replaceProps(nextProps);
113
+ });
114
+ return prevComponent;
115
+ } else {
116
+ ReactMount.unmountAndReleaseReactRootNode(container);
117
+ }
118
}
119
120
ReactMount.prepareTopLevelEvents(ReactEventTopLevelCallback);
src/core/__tests__/ReactMount-test.js
new
+22
@@ -0,0 +1,22 @@
1
+/**
2
+ * @jsx React.DOM
3
+ * @emails react-core
4
+ */
5
+
6
+"use strict";
7
+
8
+describe('ReactMount', function() {
9
+ var React = require('React');
10
+ var ReactMount = require('ReactMount');
11
+
12
+ it('should render different components in same root', function() {
13
+ var container = document.createElement('container');
14
+ document.documentElement.appendChild(container);
15
+
16
+ ReactMount.renderComponent(<div></div>, container);
17
+ expect(container.firstChild.nodeName).toBe('DIV');
18
+
19
+ ReactMount.renderComponent(<span></span>, container);
20
+ expect(container.firstChild.nodeName).toBe('SPAN');
21
+ });
22
+});