Merge pull request #9 from reactjs/refs

Support refs on children

package.json

@@ -40,7 +40,9 @@
     "react-dom": "^15.0.0"
   },
   "dependencies": {
-    "dom-helpers": "^3.2.0"
+    "chain-function": "^1.0.0",
+    "dom-helpers": "^3.2.0",
+    "warning": "^3.0.0"
   },
   "devDependencies": {
     "babel-cli": "^6.18.0",
@@ -58,10 +60,11 @@
     "eslint-plugin-jsx-a11y": "^2.2.3",
     "eslint-plugin-react": "^6.7.1",
     "jest-cli": "^17.0.3",
-    "react": "^15.4.0",
-    "react-dom": "^15.4.0",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
     "release-script": "^1.0.2",
-    "rimraf": "^2.5.4"
+    "rimraf": "^2.5.4",
+    "teaspoon": "^6.4.3"
   },
   "release-script": {
     "altPkgRootFolder": "lib"

src/TransitionGroup.js

@@ -1,4 +1,6 @@
+import chain from 'chain-function';
 import React from 'react';
+import warning from 'warning';
 
 import { getChildMapping, mergeChildMappings } from './utils/ChildMapping';
 
@@ -187,6 +189,11 @@ class TransitionGroup extends React.Component {
     for (let key in this.state.children) {
       let child = this.state.children[key];
       if (child) {
+        let isCallbackRef = typeof child.ref !== 'string';
+        warning(isCallbackRef,
+          'string refs are not supported on children of TransitionGroup and will be ignored. ' +
+          'Please use a callback ref instead: https://facebook.github.io/react/docs/refs-and-the-dom.html#the-ref-callback-attribute');
+
         // You may need to apply reactive updates to a child as it is leaving.
         // The normal React way to do it won't work since the child will have
         // already been removed. In case you need this behavior you can provide
@@ -196,9 +203,11 @@ class TransitionGroup extends React.Component {
           this.props.childFactory(child),
           {
             key,
-            ref: (r) => {
-              this.childRefs[key] = r;
-            },
+            ref: chain(
+              isCallbackRef ? child.ref : null,
+              (r) => {
+                this.childRefs[key] = r;
+              }),
           },
         ));
       }

test/.eslintrc

@@ -5,9 +5,14 @@ env:
 rules:
   no-require: off
   global-require: off
+  no-console: off
   react/no-multi-comp: off
   react/no-render-return-value: off
   react/no-find-dom-node: off
   react/prop-types: off
   react/prefer-stateless-function: off
   react/jsx-boolean-value: off
+  react/no-string-refs: off
+  import/no-extraneous-dependencies:
+    - error
+    - devDependencies: true

test/TransitionGroup-test.js

@@ -1,3 +1,5 @@
+import tsp from 'teaspoon';
+
 let React;
 let ReactDOM;
 let TransitionGroup;
@@ -7,10 +9,6 @@ let TransitionGroup;
 describe('TransitionGroup', () => {
   let container;
 
-  // function normalizeCodeLocInfo(str) {
-  //   return str && str.replace(/\(at .+?:\d+\)/g, '(at **)');
-  // }
-
   beforeEach(() => {
     React = require('react');
     ReactDOM = require('react-dom');
@@ -19,6 +17,46 @@ describe('TransitionGroup', () => {
     container = document.createElement('div');
   });
 
+  it('should warn when string refs are used', () => {
+    class Child extends React.Component {
+      render() {
+        return <span />;
+      }
+    }
+
+    spyOn(console, 'error');
+
+    tsp(
+      <TransitionGroup>
+        <Child ref="string" />
+      </TransitionGroup>,
+    )
+    .render();
+
+    expect(console.error).toHaveBeenCalled();
+    expect(console.error.calls.mostRecent().args[0]).toMatch(
+      /string refs are not supported on children of TransitionGroup and will be ignored/,
+    );
+  });
+
+  it('should allow callback refs', () => {
+    const ref = jest.fn();
+
+    class Child extends React.Component {
+      render() {
+        return <span />;
+      }
+    }
+
+    tsp(
+      <TransitionGroup>
+        <Child ref={ref} />
+      </TransitionGroup>,
+    )
+    .render();
+
+    expect(ref).toHaveBeenCalled();
+  });
 
   it('should handle willEnter correctly', () => {
     let log = [];