Erreur dans VisualStudioCode : "Le type 'PropsWithChildren<{}>' ne contient pas d'accessoires React.FC pour les propriétés suivantes : db, auth, test"

Question

Je suis nouveau sur React, ionic, tsx etc et j'ai vu beaucoup de stackoverflow et de tutoriels mais je ne trouve rien que je puisse transférer dans ma configuration.

J'essaie de définir un état dans un composant de classe à donner aux composants enfants afin qu'ils puissent utiliser le hook useState pour accéder à une variable afin qu'ils puissent mettre à jour le rendu après avoir utilisé setState dans un autre composant. Fondamentalement, j'essaie d'obtenir le bouton de connexion dans un IonHeader pour authentifier l'utilisateur à l'aide de Firebase. Le composant peut ensuite mettre à jour l'état via setState à l'aide du hook onAuthStateChanged. D'autres composants de IonContent peuvent ensuite utiliser useState pour obtenir le rappel et afficher ou non leur contenu, selon que l'utilisateur est connecté ou non. Je devrai peut-être lier l'instance de classe à la fonction setState afin que les enfants puissent accéder à la fonction et à l'état ?

Le problème que j'essaie de résoudre est de synchroniser un état que les composants enfants individuels peuvent écouter et modifier pour alerter les autres composants de s'afficher avec le nouvel état. Pour les objets auth et db, je peux les mettre dans leurs composants respectifs.

Je remplacerai "test: String" par l'utilisateur d'auth, si nul alors ce sera un objet. De cette façon, je peux vérifier si l'utilisateur est connecté ou non. Tout est enveloppé dans IonReactRoute et

States.tsx

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

bouton.tsx

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

Accueil.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>
    );
  }
};

Je ne comprends pas ce qui ne va pas ici, j'ai enveloppé le retour en un seul élément et fourni les accessoires de l'enfant via PropsWithChildren. Si j'ajoute du texte à l'intérieur du LoginButton, j'obtiens "Le type '{children: string; }' manque les propriétés suivantes du type 'States' : db, auth, test". Si j'y ajoute un élément, le message d'erreur change, alors comment puis-je y ajouter un composant enfant ? Je pense que PropsWithChildren va résoudre ce problème pour moi !

Je ne sais pas si c'est une bonne solution ou si cela fonctionne, tout commentaire est apprécié !

Answer 1

La raison pour laquelle

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

Le type que vous utilisez 作为States并没有改变this.state的类型。这类似于在 let A: Superclass = B as Subclass 中，A sera Superclass, pas Subclass.

Une façon de résoudre le problème de saisie consiste à remplacer le type state du champ.

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

Une autre approche consiste à spécifier explicitement un React.Component

的类型参数，其中 P 代表 props，Scode> générique pour l'état.

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