在VisualStudioCode中出現錯誤："Type 'PropsWithChildren<{}>'缺少以下屬性：db、auth、test"的React.FC props

Question

我是 React、ionic、tsx 等新手，我看過很多 stackoverflow 和教程，但找不到任何可以轉移到我的設定中的內容。

我正在嘗試在類別元件中設定一個狀態以提供給子元件，以便它們可以使用 useState 掛鉤存取變量，以便它們可以在另一個元件中使用 setState 後更新渲染。基本上，我試圖在 IonHeader 中取得登入按鈕，以使用 firebase 對使用者進行身份驗證。然後，該元件可以利用 onAuthStateChanged 掛鉤透過 setState 更新狀態。然後，IonContent 中的其他元件可以使用 useState 取得回調，並顯示或不顯示其內容，具體取決於使用者是否登入。我可能需要將類別實例綁定到 setState 函數，以便子級可以存取該函數和狀態？

我試圖解決的問題是同步單獨的子元件可以監聽和修改的狀態，以提醒其他元件使用新狀態進行渲染。對於 auth 和 db 對象，我可以將它們放入各自的元件中。

我將用來自 auth 的用戶替換“test: String”，如果為 null，則它將是一個物件。這樣我就可以檢查使用者是否登入。這一切都包含在 IonReactRoute 中並且

States.tsx

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

按鈕.tsx

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

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

我不明白這裡出了什麼問題，我將返回包裝為僅一個元素，並透過 PropsWithChildren 提供了子道具。如果我在 LoginButton 內新增文本，則會收到「類型 '{children: string; }' 缺少類型 'States' 中的以下屬性：db、auth、test」。如果我在其中添加任何元素，錯誤訊息會發生變化，那麼如何在其中添加任何子元件呢？我認為 PropsWithChildren 會為我解決這個問題！

不知道這是否是一個好的解決方案，或者它是否有效，任何反饋都值得讚賞！

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) {
     ...
  }
  ...
}