reactjs / reactjs/react.dev

[React 19] Get context value in class component constructor

Offen
#7,832 4 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
JavaScript
Sterne
11.8k
Forks
7.9k
Ø Merge
1 T. 11 Std.
Gemergte PRs (30 T.)
11

Beschreibung

I updated version of react from 18.2.0 to 19.1.0 (@types/react to 19.1.6, @types/react-dom to 19.1.5).

After the update I received several components with such errors:

Argument of type 'typeof SplitCostDialog' is not assignable to parameter of type 'ComponentType<never>'.
  Type 'typeof SplitCostDialog' is not assignable to type 'ComponentClass<never, any>'.
    Target signature provides too few arguments. Expected 2 or more, but got 1.

I found the reason. I use context in class constructor.

export class SplitCostDialog extends React.PureComponent<ISplitCostDialogProps, IState> {
    static contextType = ResourcePlanContext;
    declare context: IResourcePlanContext;

    constructor(props: ISplitCostDialogProps, context: IResourcePlanContext) {
        super(props);

        const { scope, position } = context.modals.splitPositionCost;
        this.state = { form: new SplitCostForm(scope, position) };
    }

    ...

}

How can I use context inside a constructor after updating to version 19?
I didn't find the answer in the guide.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit dem in der Issue verlinkten React 19-Upgrade-Leitfaden und vergleiche ihn mit dem gemeldeten Konstruktorbeispiel einer Klassenkomponente. Dokumentiere, wie der Zugriff auf den Context in Konstruktoren nach dem Upgrade gehandhabt werden sollte, einschließlich der relevanten Migrationshinweise, damit der Leitfaden diesen Fall klar beantwortet.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react, typescript
Bereich
documentation
Issue-Typ
Dokumentation
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
48/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.