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
Luna Ruan committed
Mar 19, 2020 at 23:47 UTC
7c1478680f94eda01517469d1fcfa70e14bfcb05
2 files changed
+40
-4
packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js
+36
@@ -13,6 +13,7 @@ let React;
13
let ReactFeatureFlags;
14
let ReactNoop;
15
let Scheduler;
16
+let JSXDEVRuntime;
17
18
describe('ReactDeprecationWarnings', () => {
19
beforeEach(() => {
@@ -21,6 +22,9 @@ describe('ReactDeprecationWarnings', () => {
22
ReactFeatureFlags = require('shared/ReactFeatureFlags');
23
ReactNoop = require('react-noop-renderer');
24
Scheduler = require('scheduler');
25
+ if (__DEV__) {
26
+ JSXDEVRuntime = require('react/jsx-dev-runtime');
27
+ }
28
ReactFeatureFlags.warnAboutDefaultPropsOnFunctionComponents = true;
29
ReactFeatureFlags.warnAboutStringRefs = true;
30
});
@@ -109,4 +113,36 @@ describe('ReactDeprecationWarnings', () => {
113
'https://fb.me/react-strict-mode-string-ref',
114
]);
115
});
116
+
117
+ if (__DEV__) {
118
+ it('should warn when owner and self are different for string refs', () => {
119
+ class RefComponent extends React.Component {
120
+ render() {
121
+ return null;
122
+ }
123
+ }
124
+ class Component extends React.Component {
125
+ render() {
126
+ return JSXDEVRuntime.jsxDEV(
127
+ RefComponent,
128
+ {ref: 'refComponent'},
129
+ null,
130
+ false,
131
+ {},
132
+ {},
133
+ );
134
+ }
135
+ }
136
+
137
+ ReactNoop.render(<Component />);
138
+ expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
139
+ 'Warning: Component "Component" contains the string ref "refComponent". ' +
140
+ 'Support for string refs will be removed in a future major release. ' +
141
+ 'This case cannot be automatically converted to an arrow function. ' +
142
+ 'We ask you to manually fix this case by using useRef() or createRef() instead. ' +
143
+ 'Learn more about using refs safely here: ' +
144
+ 'https://fb.me/react-strict-mode-string-ref',
145
+ );
146
+ });
147
+ }
148
});
packages/react/src/jsx/ReactJSXElement.js
+4
-4
@@ -53,13 +53,13 @@ function hasValidKey(config) {
53
return config.key !== undefined;
54
}
55
56
-function warnIfStringRefCannotBeAutoConverted(config) {
56
+function warnIfStringRefCannotBeAutoConverted(config, self) {
57
if (__DEV__) {
58
if (
59
typeof config.ref === 'string' &&
60
ReactCurrentOwner.current &&
61
- config.__self &&
62
- ReactCurrentOwner.current.stateNode !== config.__self
61
+ self &&
62
+ ReactCurrentOwner.current.stateNode !== self
63
) {
64
const componentName = getComponentName(ReactCurrentOwner.current.type);
65
@@ -296,7 +296,7 @@ export function jsxDEV(type, config, maybeKey, source, self) {
296
297
if (hasValidRef(config)) {
298
ref = config.ref;
299
- warnIfStringRefCannotBeAutoConverted(config);
299
+ warnIfStringRefCannotBeAutoConverted(config, self);
300
}
301
302
// Remaining properties are added to a new props object