Warn if a function is passed to ref on an SFC

facebook · Nov 20, 2016 · b6aaa92 · b6aaa92
1 parent 2854eb9
commit b6aaa92
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/src/renderers/shared/stack/reconciler/ReactRef.js b/src/renderers/shared/stack/reconciler/ReactRef.js
@@ -13,6 +13,7 @@
 'use strict';
 
 var ReactOwner = require('ReactOwner');
+var warning = require('warning');
 
 import type { ReactInstance } from 'ReactInstanceType';
 import type { ReactElement } from 'ReactElementType';
@@ -21,7 +22,12 @@ var ReactRef = {};
 
 function attachRef(ref, component, owner) {
   if (typeof ref === 'function') {
-    ref(component.getPublicInstance());
+    var instance = component.getPublicInstance();
+    warning(
+      instance !== null,
+      'Stateless function components cannot have refs.'
+    );
+    ref(instance);
   } else {
     // Legacy ref
     ReactOwner.addComponentAsRefTo(

diff --git a/src/renderers/shared/stack/reconciler/__tests__/ReactStatelessComponent-test.js b/src/renderers/shared/stack/reconciler/__tests__/ReactStatelessComponent-test.js
@@ -149,9 +149,9 @@ describe('ReactStatelessComponent', () => {
   it('should warn for functional refs in pure functions', function() {
     spyOn(console, 'error');
     function Child() {
-      return <div ref={node => {}} />;
+      return <div/>;
     }
-    ReactTestUtils.renderIntoDocument(<Child test="test" />);
+    ReactTestUtils.renderIntoDocument(<Child ref={node => {}} />);
     expect(console.error.calls.count()).toBe(1);
     expect(console.error.calls.argsFor(0)[0]).toContain(
       'Stateless function components cannot have refs.'