Ralat dalam VisualStudioCode: "Taip 'PropsWithChildren<{}>' tiada prop React.FC untuk sifat berikut: db, auth, test"

Question

Saya baru mengenali React, ionic, tsx dll dan saya telah melihat banyak stackoverflow dan tutorial tetapi tidak dapat mencari apa-apa yang boleh saya pindahkan ke persediaan saya.

Saya cuba menetapkan keadaan dalam komponen kelas untuk diberikan kepada komponen kanak-kanak supaya mereka boleh menggunakan cangkuk useState untuk mengakses pembolehubah supaya mereka boleh mengemas kini pemaparan selepas menggunakan setState dalam komponen lain. Pada asasnya, saya cuba mendapatkan butang log masuk dalam IonHeader untuk mengesahkan pengguna menggunakan firebase. Komponen kemudiannya boleh mengemas kini keadaan melalui setState menggunakan cangkuk onAuthStateChanged. Komponen lain dalam IonContent kemudiannya boleh menggunakan useState untuk mendapatkan panggilan balik dan memaparkan kandungannya atau tidak, bergantung pada sama ada pengguna log masuk atau tidak. Saya mungkin perlu mengikat contoh kelas kepada fungsi setState supaya kanak-kanak boleh mengakses fungsi dan keadaan?

Masalah yang saya cuba selesaikan ialah menyegerakkan keadaan yang boleh didengari oleh komponen anak individu dan diubah suai untuk memaklumkan komponen lain supaya dibuat dengan keadaan baharu. Untuk objek auth dan db saya boleh memasukkannya ke dalam komponen masing-masing.

Saya akan menggantikan "test: String" dengan pengguna dari auth, jika null maka ia akan menjadi objek. Dengan cara ini saya boleh menyemak sama ada pengguna telah log masuk atau tidak. Semuanya dibungkus dalam IonReactRoute dan

Negeri.tsx

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

butang.tsx

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

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

Saya tidak faham apa yang berlaku di sini, saya membalut pengembalian menjadi hanya satu elemen dan menyediakan prop kanak-kanak melalui PropsWithChildren. Jika saya menambah teks di dalam Butang Masuk, saya mendapat "Jenis '{children: string; }' tiada sifat berikut daripada jenis 'States': db, auth, test". Jika saya menambah sebarang elemen di dalamnya mesej ralat berubah, jadi bagaimana saya boleh menambah sebarang komponen kanak-kanak di dalamnya? Saya rasa PropsWithChildren akan menyelesaikan masalah ini untuk saya!

Tidak pasti sama ada ini penyelesaian yang baik atau berkesan, sebarang maklum balas amat dihargai!

Answer 1

Sebab mengapa

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

Jenis yang anda gunakan 作为States并没有改变this.state的类型。这类似于在 let A: Superclass = B as Subclass 中，A ialah Superclass, bukan Subclass.

Salah satu cara untuk menyelesaikan masalah input ialah mengatasi jenis state medan.

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

Pendekatan lain ialah dengan menyatakan secara eksplisit kod React.Component

的类型参数，其中 P 代表 props，S generik> untuk keadaan.

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