diff --git a/src/core/ReactComponent.js b/src/core/ReactComponent.js index 49d6eeb70e..f85c5cce25 100644 --- a/src/core/ReactComponent.js +++ b/src/core/ReactComponent.js @@ -127,8 +127,8 @@ function validateChildKeys(component) { * `mountComponent` * Initializes the component, renders markup, and registers event listeners. * - * `receiveProps` - * Updates the rendered DOM nodes given a new set of props. + * `receiveComponent` + * Updates the rendered DOM nodes to match the given component. * * `unmountComponent` * Releases any resources allocated by this component. @@ -151,7 +151,7 @@ var ReactComponent = { return !!( object && typeof object.mountComponentIntoNode === 'function' && - typeof object.receiveProps === 'function' + typeof object.receiveComponent === 'function' ); }, @@ -369,21 +369,22 @@ var ReactComponent = { }, /** - * Updates the rendered DOM nodes given a new set of props. + * Given a new instance of this component, updates the rendered DOM nodes + * as if that instance was rendered instead. * * Subclasses that override this method should make sure to invoke - * `ReactComponent.Mixin.receiveProps.call(this, ...)`. + * `ReactComponent.Mixin.receiveComponent.call(this, ...)`. * - * @param {object} nextProps Next set of properties. + * @param {object} nextComponent Next set of properties. * @param {ReactReconcileTransaction} transaction * @internal */ - receiveProps: function(nextProps, transaction) { + receiveComponent: function(nextComponent, transaction) { invariant( this.isMounted(), - 'receiveProps(...): Can only update a mounted component.' + 'receiveComponent(...): Can only update a mounted component.' ); - this._pendingProps = nextProps; + this._pendingProps = nextComponent.props; this._performUpdateIfNecessary(transaction); }, diff --git a/src/core/ReactCompositeComponent.js b/src/core/ReactCompositeComponent.js index 8f2a04a4dc..2168128c77 100644 --- a/src/core/ReactCompositeComponent.js +++ b/src/core/ReactCompositeComponent.js @@ -794,7 +794,7 @@ var ReactCompositeComponentMixin = { var prevComponent = this._renderedComponent; var nextComponent = this._renderValidatedComponent(); if (shouldUpdateReactComponent(prevComponent, nextComponent)) { - prevComponent.receiveProps(nextComponent.props, transaction); + prevComponent.receiveComponent(nextComponent, transaction); } else { // These two IDs are actually the same! But nothing should rely on that. var thisID = this._rootNodeID; diff --git a/src/core/ReactDOMComponent.js b/src/core/ReactDOMComponent.js index 1c37a33cc3..dcbc791103 100644 --- a/src/core/ReactDOMComponent.js +++ b/src/core/ReactDOMComponent.js @@ -179,9 +179,13 @@ ReactDOMComponent.Mixin = { return ''; }, - receiveProps: function(nextProps, transaction) { - assertValidProps(nextProps); - ReactComponent.Mixin.receiveProps.call(this, nextProps, transaction); + receiveComponent: function(nextComponent, transaction) { + assertValidProps(nextComponent.props); + ReactComponent.Mixin.receiveComponent.call( + this, + nextComponent, + transaction + ); }, /** diff --git a/src/core/ReactMultiChild.js b/src/core/ReactMultiChild.js index 39011119dd..d16d0d4734 100644 --- a/src/core/ReactMultiChild.js +++ b/src/core/ReactMultiChild.js @@ -285,7 +285,7 @@ var ReactMultiChild = { if (shouldUpdateReactComponent(prevChild, nextChild)) { this.moveChild(prevChild, nextIndex, lastIndex); lastIndex = Math.max(prevChild._mountIndex, lastIndex); - prevChild.receiveProps(nextChild.props, transaction); + prevChild.receiveComponent(nextChild, transaction); prevChild._mountIndex = nextIndex; } else { if (prevChild) { diff --git a/src/core/ReactTextComponent.js b/src/core/ReactTextComponent.js index 235f0dad41..5b1da0f4bd 100644 --- a/src/core/ReactTextComponent.js +++ b/src/core/ReactTextComponent.js @@ -74,11 +74,12 @@ mixInto(ReactTextComponent, { /** * Updates this component by updating the text content. * - * @param {object} nextProps Contains the next text content. + * @param {object} nextComponent Contains the next text content. * @param {ReactReconcileTransaction} transaction * @internal */ - receiveProps: function(nextProps, transaction) { + receiveComponent: function(nextComponent, transaction) { + var nextProps = nextComponent.props; if (nextProps.text !== this.props.text) { this.props.text = nextProps.text; ReactComponent.DOMIDOperations.updateTextContentByID( diff --git a/src/core/__tests__/ReactDOMComponent-test.js b/src/core/__tests__/ReactDOMComponent-test.js index 247257d662..973f03cb04 100644 --- a/src/core/__tests__/ReactDOMComponent-test.js +++ b/src/core/__tests__/ReactDOMComponent-test.js @@ -41,11 +41,11 @@ describe('ReactDOMComponent', function() { it("should handle className", function() { var stub = ReactTestUtils.renderIntoDocument(
); - stub.receiveProps({ className: 'foo' }, transaction); + stub.receiveComponent({props: { className: 'foo' }}, transaction); expect(stub.getDOMNode().className).toEqual('foo'); - stub.receiveProps({ className: 'bar' }, transaction); + stub.receiveComponent({props: { className: 'bar' }}, transaction); expect(stub.getDOMNode().className).toEqual('bar'); - stub.receiveProps({ className: null }, transaction); + stub.receiveComponent({props: { className: null }}, transaction); expect(stub.getDOMNode().className).toEqual(''); }); @@ -55,14 +55,14 @@ describe('ReactDOMComponent', function() { // set initial style var setup = { display: 'block', left: '1', top: 2, fontFamily: 'Arial' }; - stub.receiveProps({ style: setup }, transaction); + stub.receiveComponent({props: { style: setup }}, transaction); expect(stubStyle.display).toEqual('block'); expect(stubStyle.left).toEqual('1px'); expect(stubStyle.fontFamily).toEqual('Arial'); // reset the style to their default state var reset = { display: '', left: null, top: false, fontFamily: true }; - stub.receiveProps({ style: reset }, transaction); + stub.receiveComponent({props: { style: reset }}, transaction); expect(stubStyle.display).toEqual(''); expect(stubStyle.left).toEqual(''); expect(stubStyle.top).toEqual(''); @@ -79,21 +79,21 @@ describe('ReactDOMComponent', function() { styles.display = 'block'; - stub.receiveProps({ style: styles }, transaction); + stub.receiveComponent({props: { style: styles }}, transaction); expect(stubStyle.display).toEqual('block'); expect(stubStyle.fontFamily).toEqual('Arial'); expect(stubStyle.opacity).toEqual('0'); styles.fontFamily = 'Helvetica'; - stub.receiveProps({ style: styles }, transaction); + stub.receiveComponent({props: { style: styles }}, transaction); expect(stubStyle.display).toEqual('block'); expect(stubStyle.fontFamily).toEqual('Helvetica'); expect(stubStyle.opacity).toEqual('0'); styles.opacity = 0.5; - stub.receiveProps({ style: styles }, transaction); + stub.receiveComponent({props: { style: styles }}, transaction); expect(stubStyle.display).toEqual('block'); expect(stubStyle.fontFamily).toEqual('Helvetica'); expect(stubStyle.opacity).toEqual('0.5'); @@ -107,7 +107,7 @@ describe('ReactDOMComponent', function() { styles = {display: 'block'}; - stub.receiveProps({ style: styles }, transaction); + stub.receiveComponent({props: { style: styles }}, transaction); expect(stubStyle.display).toEqual('block'); }); @@ -115,7 +115,7 @@ describe('ReactDOMComponent', function() { var stub = ReactTestUtils.renderIntoDocument(); expect(stub.getDOMNode().hasAttribute('height')).toBe(true); - stub.receiveProps({}, transaction); + stub.receiveComponent({props: {}}, transaction); expect(stub.getDOMNode().hasAttribute('height')).toBe(false); }); @@ -123,7 +123,7 @@ describe('ReactDOMComponent', function() { var stub = ReactTestUtils.renderIntoDocument(
); expect(stub.getDOMNode().className).toEqual('monkey'); - stub.receiveProps({}, transaction); + stub.receiveComponent({props: {}}, transaction); expect(stub.getDOMNode().className).toEqual(''); }); @@ -134,7 +134,7 @@ describe('ReactDOMComponent', function() { var stubStyle = stub.getDOMNode().style; styles = {color: 'green'}; - stub.receiveProps({ style: styles }, transaction); + stub.receiveComponent({props: { style: styles }}, transaction); expect(stubStyle.display).toEqual(''); expect(stubStyle.color).toEqual('green'); }); @@ -145,7 +145,7 @@ describe('ReactDOMComponent', function() { var stubStyle = stub.getDOMNode().style; - stub.receiveProps({}, transaction); + stub.receiveComponent({props: {}}, transaction); expect(stubStyle.display).toEqual(''); expect(stubStyle.color).toEqual(''); }); @@ -156,7 +156,7 @@ describe('ReactDOMComponent', function() { ); expect(stub.getDOMNode().innerHTML).toEqual(':)'); - stub.receiveProps({}, transaction); + stub.receiveComponent({props: {}}, transaction); expect(stub.getDOMNode().innerHTML).toEqual(''); }); @@ -166,8 +166,8 @@ describe('ReactDOMComponent', function() { ); expect(stub.getDOMNode().innerHTML).toEqual('hello'); - stub.receiveProps( - {dangerouslySetInnerHTML: {__html: 'goodbye'}}, + stub.receiveComponent( + {props: {dangerouslySetInnerHTML: {__html: 'goodbye'}}}, transaction ); expect(stub.getDOMNode().innerHTML).toEqual('goodbye'); @@ -179,7 +179,7 @@ describe('ReactDOMComponent', function() { ); expect(stub.getDOMNode().innerHTML).toEqual('bonjour'); - stub.receiveProps({children: 'adieu'}, transaction); + stub.receiveComponent({props: {children: 'adieu'}}, transaction); expect(stub.getDOMNode().innerHTML).toEqual('adieu'); }); @@ -198,10 +198,10 @@ describe('ReactDOMComponent', function() { }) }); - stub.receiveProps({value: ''}, transaction); + stub.receiveComponent({props: {value: ''}}, transaction); expect(nodeValueSetter.mock.calls.length).toBe(0); - stub.receiveProps({}, transaction); + stub.receiveComponent({props: {}}, transaction); expect(nodeValueSetter.mock.calls.length).toBe(1); }); });