Guard against legacy context not being supported in DevTools fixture (#28596)
Sebastian Silbermann committed
Mar 25, 2024 at 14:30 UTC
e373190faf3b994707f09488c1a7832f4a91e15a
1 file changed
+35
-4
packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
+35
-4
@@ -273,15 +273,46 @@ class ModernClassContextConsumerWithUpdates extends Component<any> {
273
}
274
}
275
276
+type LegacyContextState = {
277
+ supportsLegacyContext: boolean,
278
+};
279
+class LegacyContext extends React.Component {
280
+ state: LegacyContextState = {supportsLegacyContext: true};
281
+
282
+ static getDerivedStateFromError(error: any): LegacyContextState {
283
+ return {supportsLegacyContext: false};
284
+ }
285
+
286
+ componentDidCatch(error: any, info: any) {
287
+ console.info(
288
+ 'Assuming legacy context is not supported in this React version due to: ',
289
+ error,
290
+ info,
291
+ );
292
+ }
293
+
294
+ render(): React.Node {
295
+ if (!this.state.supportsLegacyContext) {
296
+ return <p>This version of React does not support legacy context.</p>;
297
+ }
298
+
299
+ return (
300
+ <React.Fragment>
301
+ <LegacyContextProvider>
302
+ <LegacyContextConsumer />
303
+ </LegacyContextProvider>
304
+ <LegacyContextProviderWithUpdates />
305
+ </React.Fragment>
306
+ );
307
+ }
308
+}
309
+
310
export default function Contexts(): React.Node {
311
return (
312
<div>
313
<h1>Contexts</h1>
314
<ul>
281
- <LegacyContextProvider>
282
- <LegacyContextConsumer />
283
- </LegacyContextProvider>
284
- <LegacyContextProviderWithUpdates />
315
+ <LegacyContext />
316
<ModernContext.Provider value={contextData}>
317
<ModernContext.Consumer>
318
{(value: $FlowFixMe) =>