fix string ref cannot be auto converted warning for React.jsxDEV (#18354

) The string ref cannot be auto converted warning was using the wrong _self. This diff fixes this so it is now using the correct __self
facebook · Mar 20, 2020 · 7c14786 · 7c14786
1 parent f198872
commit 7c14786
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 4 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js b/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js
@@ -13,6 +13,7 @@ let React;
 let ReactFeatureFlags;
 let ReactNoop;
 let Scheduler;
+let JSXDEVRuntime;
 
 describe('ReactDeprecationWarnings', () => {
   beforeEach(() => {
@@ -21,6 +22,9 @@ describe('ReactDeprecationWarnings', () => {
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    if (__DEV__) {
+      JSXDEVRuntime = require('react/jsx-dev-runtime');
+    }
     ReactFeatureFlags.warnAboutDefaultPropsOnFunctionComponents = true;
     ReactFeatureFlags.warnAboutStringRefs = true;
   });
@@ -109,4 +113,36 @@ describe('ReactDeprecationWarnings', () => {
         'https://fb.me/react-strict-mode-string-ref',
     ]);
   });
+
+  if (__DEV__) {
+    it('should warn when owner and self are different for string refs', () => {
+      class RefComponent extends React.Component {
+        render() {
+          return null;
+        }
+      }
+      class Component extends React.Component {
+        render() {
+          return JSXDEVRuntime.jsxDEV(
+            RefComponent,
+            {ref: 'refComponent'},
+            null,
+            false,
+            {},
+            {},
+          );
+        }
+      }
+
+      ReactNoop.render(<Component />);
+      expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
+        'Warning: Component "Component" contains the string ref "refComponent". ' +
+          'Support for string refs will be removed in a future major release. ' +
+          'This case cannot be automatically converted to an arrow function. ' +
+          'We ask you to manually fix this case by using useRef() or createRef() instead. ' +
+          'Learn more about using refs safely here: ' +
+          'https://fb.me/react-strict-mode-string-ref',
+      );
+    });
+  }
 });
diff --git a/packages/react/src/jsx/ReactJSXElement.js b/packages/react/src/jsx/ReactJSXElement.js
@@ -53,13 +53,13 @@ function hasValidKey(config) {
   return config.key !== undefined;
 }
 
-function warnIfStringRefCannotBeAutoConverted(config) {
+function warnIfStringRefCannotBeAutoConverted(config, self) {
   if (__DEV__) {
     if (
       typeof config.ref === 'string' &&
       ReactCurrentOwner.current &&
-      config.__self &&
-      ReactCurrentOwner.current.stateNode !== config.__self
+      self &&
+      ReactCurrentOwner.current.stateNode !== self
     ) {
       const componentName = getComponentName(ReactCurrentOwner.current.type);
 
@@ -296,7 +296,7 @@ export function jsxDEV(type, config, maybeKey, source, self) {
 
     if (hasValidRef(config)) {
       ref = config.ref;
-      warnIfStringRefCannotBeAutoConverted(config);
+      warnIfStringRefCannotBeAutoConverted(config, self);
     }
 
     // Remaining properties are added to a new props object