Add runtime deprecation warning for cloneWithProps

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}
         ));

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 (
+          <div>
+            {cloneWithProps(onlyChild(this.props.children), {})}
+          </div>
+        );
+      },
+    });
+    ReactTestUtils.renderIntoDocument(<Parent><div /></Parent>);
+    ReactTestUtils.renderIntoDocument(<Parent><div /></Parent>);
+    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 <Parent><div ref="yolo" /></Parent>;
@@ -99,7 +117,7 @@ describe('cloneWithProps', function() {
 
     var component = ReactTestUtils.renderIntoDocument(<Grandparent />);
     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() {

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 ' +