mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
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
This commit is contained in:
@@ -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',
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user