Skip to content

Commit 7c14786

Browse files
authored
fix string ref cannot be auto converted warning for React.jsxDEV (facebook#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
1 parent f198872 commit 7c14786

File tree

2 files changed

+40
-4
lines changed

2 files changed

+40
-4
lines changed

packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ let React;
1313
let ReactFeatureFlags;
1414
let ReactNoop;
1515
let Scheduler;
16+
let JSXDEVRuntime;
1617

1718
describe('ReactDeprecationWarnings', () => {
1819
beforeEach(() => {
@@ -21,6 +22,9 @@ describe('ReactDeprecationWarnings', () => {
2122
ReactFeatureFlags = require('shared/ReactFeatureFlags');
2223
ReactNoop = require('react-noop-renderer');
2324
Scheduler = require('scheduler');
25+
if (__DEV__) {
26+
JSXDEVRuntime = require('react/jsx-dev-runtime');
27+
}
2428
ReactFeatureFlags.warnAboutDefaultPropsOnFunctionComponents = true;
2529
ReactFeatureFlags.warnAboutStringRefs = true;
2630
});
@@ -109,4 +113,36 @@ describe('ReactDeprecationWarnings', () => {
109113
'https://fb.me/react-strict-mode-string-ref',
110114
]);
111115
});
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+
}
112148
});

packages/react/src/jsx/ReactJSXElement.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,13 +53,13 @@ function hasValidKey(config) {
5353
return config.key !== undefined;
5454
}
5555

56-
function warnIfStringRefCannotBeAutoConverted(config) {
56+
function warnIfStringRefCannotBeAutoConverted(config, self) {
5757
if (__DEV__) {
5858
if (
5959
typeof config.ref === 'string' &&
6060
ReactCurrentOwner.current &&
61-
config.__self &&
62-
ReactCurrentOwner.current.stateNode !== config.__self
61+
self &&
62+
ReactCurrentOwner.current.stateNode !== self
6363
) {
6464
const componentName = getComponentName(ReactCurrentOwner.current.type);
6565

@@ -296,7 +296,7 @@ export function jsxDEV(type, config, maybeKey, source, self) {
296296

297297
if (hasValidRef(config)) {
298298
ref = config.ref;
299-
warnIfStringRefCannotBeAutoConverted(config);
299+
warnIfStringRefCannotBeAutoConverted(config, self);
300300
}
301301

302302
// Remaining properties are added to a new props object

0 commit comments

Comments
 (0)