diff --git a/src/addons/transitions/ReactTransitionGroup.js b/src/addons/transitions/ReactTransitionGroup.js index d3316619f6..352c4e5ae7 100644 --- a/src/addons/transitions/ReactTransitionGroup.js +++ b/src/addons/transitions/ReactTransitionGroup.js @@ -15,7 +15,6 @@ var React = require('React'); var ReactTransitionChildMapping = require('ReactTransitionChildMapping'); var assign = require('Object.assign'); -var cloneWithProps = require('cloneWithProps'); var emptyFunction = require('emptyFunction'); var ReactTransitionGroup = React.createClass({ @@ -213,7 +212,7 @@ var ReactTransitionGroup = React.createClass({ // already been removed. In case you need this behavior you can provide // a childFactory function to wrap every child, even the ones that are // leaving. - childrenToRender.push(cloneWithProps( + childrenToRender.push(React.cloneElement( this.props.childFactory(child), {ref: key, key: key} )); diff --git a/src/isomorphic/deprecated/__tests__/cloneWithProps-test.js b/src/isomorphic/deprecated/__tests__/cloneWithProps-test.js index d12783bfea..5343fd49e8 100644 --- a/src/isomorphic/deprecated/__tests__/cloneWithProps-test.js +++ b/src/isomorphic/deprecated/__tests__/cloneWithProps-test.js @@ -30,6 +30,26 @@ describe('cloneWithProps', function() { onlyChild = require('onlyChild'); cloneWithProps = require('cloneWithProps'); emptyObject = require('emptyObject'); + spyOn(console, 'error'); + }); + + it('should warn once because it is deprecated', function() { + var Parent = React.createClass({ + render: function() { + return ( +
+ {cloneWithProps(onlyChild(this.props.children), {})} +
+ ); + }, + }); + ReactTestUtils.renderIntoDocument(
); + ReactTestUtils.renderIntoDocument(
); + expect(console.error.argsForCall.length).toBe(1); + expect(console.error.argsForCall[0][0]).toContain( + 'cloneWithProps(...) is deprecated. ' + + 'Please use React.cloneElement instead.' + ); }); it('should clone a DOM component with new props', function() { @@ -80,8 +100,6 @@ describe('cloneWithProps', function() { }); it('should warn when cloning with refs', function() { - spyOn(console, 'error'); - var Grandparent = React.createClass({ render: function() { return
; @@ -99,7 +117,7 @@ describe('cloneWithProps', function() { var component = ReactTestUtils.renderIntoDocument(); expect(component.refs).toBe(emptyObject); - expect(console.error.argsForCall.length).toBe(1); + expect(console.error.argsForCall.length).toBe(2); }); it('should transfer the key property', function() { diff --git a/src/isomorphic/deprecated/cloneWithProps.js b/src/isomorphic/deprecated/cloneWithProps.js index 3a5291e4da..589747c6ce 100644 --- a/src/isomorphic/deprecated/cloneWithProps.js +++ b/src/isomorphic/deprecated/cloneWithProps.js @@ -20,6 +20,8 @@ var warning = require('warning'); var CHILDREN_PROP = keyOf({children: null}); +var didDeprecatedWarn = false; + /** * Sometimes you want to change the props of a child passed to you. Usually * this is to add a CSS class. @@ -28,9 +30,16 @@ var CHILDREN_PROP = keyOf({children: null}); * @param {object} props props you'd like to modify. className and style will be * merged automatically. * @return {ReactElement} a clone of child with props merged in. + * @deprecated */ function cloneWithProps(child, props) { if (__DEV__) { + warning( + didDeprecatedWarn, + 'cloneWithProps(...) is deprecated. ' + + 'Please use React.cloneElement instead.' + ); + didDeprecatedWarn = true; warning( !child.ref, 'You are calling cloneWithProps() on a child with a ref. This is ' +