Add component/owner name to warning

facebook · Nov 20, 2016 · 75f9efe · 75f9efe
1 parent b6aaa92
commit 75f9efe
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/src/renderers/shared/stack/reconciler/ReactRef.js b/src/renderers/shared/stack/reconciler/ReactRef.js
@@ -23,10 +23,16 @@ var ReactRef = {};
 function attachRef(ref, component, owner) {
   if (typeof ref === 'function') {
     var instance = component.getPublicInstance();
-    warning(
-      instance !== null,
-      'Stateless function components cannot have refs.'
-    );
+    if (__DEV__) {
+      var componentName = component && component.getName ?
+        component.getName() : 'a component';
+      warning(instance != null,
+        'Stateless function components cannot be given refs ' +
+        '(See %s%s).',
+        componentName,
+        owner ? ' created by ' + owner.getName() : ''
+      );
+    }
     ref(instance);
   } else {
     // Legacy ref

diff --git a/src/renderers/shared/stack/reconciler/__tests__/ReactStatelessComponent-test.js b/src/renderers/shared/stack/reconciler/__tests__/ReactStatelessComponent-test.js
@@ -148,13 +148,19 @@ describe('ReactStatelessComponent', () => {
 
   it('should warn for functional refs in pure functions', function() {
     spyOn(console, 'error');
-    function Child() {
-      return <div/>;
-    }
-    ReactTestUtils.renderIntoDocument(<Child ref={node => {}} />);
+
+    var Parent = React.createClass({
+      displayName: 'Parent',
+      render: function() {
+        return <StatelessComponent name="A" ref={() => {}}/>;
+      },
+    });
+
+    ReactTestUtils.renderIntoDocument(<Parent />);
     expect(console.error.calls.count()).toBe(1);
     expect(console.error.calls.argsFor(0)[0]).toContain(
-      'Stateless function components cannot have refs.'
+      'Stateless function components cannot be given refs ' +
+      '(See StatelessComponent created by Parent).',
     );
   });