私は React、ionic、tsx などを初めて使用しており、スタックオーバーフローやチュートリアルをたくさん見ましたが、自分のセットアップに移せるものが見つかりません。
子コンポーネントに提供する状態をクラス コンポーネントに設定して、子コンポーネントが useState フックを使用して変数にアクセスできるようにし、別のコンポーネントで setState を使用した後にレンダリングを更新できるようにしようとしています。基本的に、IonHeader でログイン ボタンを取得して、firebase を使用してユーザーを認証しようとしています。その後、コンポーネントは onAuthStateChanged フックを使用して setState 経由で状態を更新できます。 IonContent 内の他のコンポーネントは useState を使用してコールバックを取得し、ユーザーがログインしているかどうかに応じてコンテンツを表示するかどうかを判断できます。子が関数と状態にアクセスできるように、クラス インスタンスを setState 関数にバインドする必要があるかもしれません。
私が解決しようとしている問題は、個々の子コンポーネントがリッスンして変更できる状態を同期して、他のコンポーネントに新しい状態でレンダリングするよう警告することです。 auth オブジェクトと db オブジェクトについては、それぞれのコンポーネントに入れることができます。
「test: String」を認証のユーザーに置き換えます。null の場合はオブジェクトになります。このようにして、ユーザーがログインしているかどうかを確認できます。すべては IonReactRoute と
にまとめられています。州.tsx
リーリーボタン.tsx
リーリーホーム.tsx
リーリーここで何が問題になっているのか理解できません。リターンを 1 つの要素にラップし、PropsWithChildren を介して子プロパティを提供しました。 LoginButton 内にテキストを追加すると、「タイプ '{children: string; }' にはタイプ 'States' の次のプロパティがありません: db、auth、test」というメッセージが表示されます。要素を追加するとエラー メッセージが変わります。その場合、子コンポーネントを追加するにはどうすればよいでしょうか? PropsWithChildren がこの問題を解決してくれると思います。
これが良い解決策なのか、うまくいくのかわかりませんが、フィードバックは大歓迎です。
P粉7665209912024-03-30 00:05:15
"Type '{}' などが表示される理由は、state フィールドが React.Component を継承しているためです。デフォルトでは、 this.state の型は Readonly<{}> で、これを {...this.state} > のように展開すると、結果の型は { } .
States として を使用しても、this.state のタイプは変更されません。これは、let A: Superclass = B as Subclass で A の型がサブクラスではなくスーパークラスになるのと似ています。
入力の問題を解決する 1 つの方法は、state フィールドの型をオーバーライドすることです。
もう 1 つのアプローチは、汎用 React.Component の型パラメーターを明示的に指定することです。ここで、P はプロパティを表し、S code> が使用されます。州。