Fehler in VisualStudioCode: „Typ ‚PropsWithChildren<{}>' fehlt React.FC-Requisiten für die folgenden Eigenschaften: db, auth, test'

Question

Ich bin neu bei React, ionic, tsx usw. und habe viele Stackoverflows und Tutorials gesehen, kann aber nichts finden, was ich auf mein Setup übertragen kann.

Ich versuche, einen Status in einer Klassenkomponente festzulegen, der an untergeordnete Komponenten übergeben werden soll, damit diese mit dem useState-Hook auf eine Variable zugreifen können, damit sie das Rendering aktualisieren können, nachdem sie setState in einer anderen Komponente verwendet haben. Grundsätzlich versuche ich, die Anmeldeschaltfläche in einem IonHeader zu erhalten, um den Benutzer mithilfe von Firebase zu authentifizieren. Die Komponente kann dann den Status über setState mithilfe des onAuthStateChanged-Hooks aktualisieren. Andere Komponenten im IonContent können dann useState verwenden, um den Rückruf abzurufen und ihren Inhalt anzuzeigen oder nicht, je nachdem, ob der Benutzer angemeldet ist oder nicht. Möglicherweise muss ich die Klasseninstanz an die Funktion „setState“ binden, damit Kinder auf die Funktion und den Status zugreifen können.

Das Problem, das ich zu lösen versuche, besteht darin, einen Zustand zu synchronisieren, den einzelne untergeordnete Komponenten abhören und ändern können, um andere Komponenten darauf aufmerksam zu machen, mit dem neuen Zustand zu rendern. Die Auth- und DB-Objekte kann ich in ihre jeweiligen Komponenten einfügen.

Ich werde „test: String“ durch den Benutzer von auth ersetzen, wenn null, dann ist es ein Objekt. Auf diese Weise kann ich überprüfen, ob der Benutzer angemeldet ist oder nicht. Es ist alles in IonReactRoute und

zusammengefasst

States.tsx

export interface States extends React.PropsWithChildren{
    db: Firestore,
    auth: Auth,
    test: String,
}

button.tsx

export const LoginButton: React.FC<States> = (children, props) =>
{
  return (
    <Fragment>
    <div id='divLogin'>
      <button>login {props.test}</button>
      {props.children}
    </div>
    </Fragment>
  )
}

Home.tsx

export default class Home extends React.Component{
  constructor(props) {
    super(props)
    // init firebase app
    initializeApp(firebaseConfig)
    // init services
    this.state = {
      db: getFirestore(),
      auth: getAuth(),
      test: 'teststring'
    } as States
  }

  render() {

    return (
      <IonPage>
        {/* Header */}
        <IonHeader translucent>
          <IonToolbar>
            <IonTitle>Hydroponics-lurvas777</IonTitle>
            <LoginButton {...this.state}></LoginButton>
            {/*^^^^ this gives error: "Type '{}' is missing the following properties from type 'States': db, auth, test"*/}
          </IonToolbar>
        </IonHeader>
        <IonContent fullscreen>
          {/* Condense header for ios devices, larger to smaller header */}
          <IonHeader collapse="condense" translucent>
            <IonToolbar>
              <IonTitle size="large">Hej ios</IonTitle>
              </IonToolbar>
          </IonHeader>
          {/* Here's the real content, everything is toggles by auth state */}
        </IonContent>
      </IonPage>
    );
  }
};

Ich verstehe nicht, was hier falsch läuft. Ich habe die Rückgabe in nur ein Element verpackt und die untergeordneten Requisiten über PropsWithChildren bereitgestellt. Wenn ich Text innerhalb des LoginButton hinzufüge, erhalte ich die Meldung „Typ '{children: string; }' fehlt die folgenden Eigenschaften vom Typ 'States': db, auth, test“. Wenn ich ein Element hinzufüge, ändert sich die Fehlermeldung. Wie kann ich also eine untergeordnete Komponente hinzufügen? Ich denke, PropsWithChildren wird dieses Problem für mich lösen!

Ich bin mir nicht sicher, ob dies eine gute Lösung ist oder funktioniert. Wir freuen uns über jedes Feedback!

Answer 1

之所以显示“Type '{}'等，是因为state字段继承自React.Component默认情况下，this.state 的类型为 Readonly，当您像 {...this.state} 那样展开它时>，结果的类型为 {}。

您使用作为States并没有改变this.state的类型。这类似于在 let A: Superclass = B as Subclass 中，A 的类型将是 Superclass，而不是 Subclass。

解决输入问题的一种方法是覆盖 state 字段的类型。

export default class Home extends React.Component{
  state: States
  constructor(props: Props) {
     ...
  }
  ...
}

另一种方法是显式指定通用 React.Component

的类型参数，其中 P 代表 props，S code> 用于状态。

export default class Home extends React.Component{
  constructor(props: Props) {
     ...
  }
  ...
}