VisualStudioCode 오류: "'PropsWithChildren<{}>' 유형에 다음 속성에 대한 React.FC 소품이 없습니다: db, auth, test"

Question

저는 React, ionic, tsx 등을 처음 접했고 많은 stackoverflow와 튜토리얼을 보았지만 설정으로 전송할 수 있는 내용을 찾을 수 없습니다.

다른 구성 요소에서 setState를 사용한 후 렌더링을 업데이트할 수 있도록 useState 후크를 사용하여 변수에 액세스할 수 있도록 하위 구성 요소에 제공할 클래스 구성 요소의 상태를 설정하려고 합니다. 기본적으로 Firebase를 사용하여 사용자를 인증하기 위해 IonHeader에 로그인 버튼을 가져오려고 합니다. 그런 다음 구성 요소는 onAuthStateChanged 후크를 사용하여 setState를 통해 상태를 업데이트할 수 있습니다. 그러면 IonContent의 다른 구성 요소는 useState를 사용하여 콜백을 가져오고 사용자의 로그인 여부에 따라 콘텐츠를 표시할지 여부를 결정할 수 있습니다. 아이들이 함수와 상태에 접근할 수 있도록 클래스 인스턴스를 setState 함수에 바인딩해야 할 수도 있습니까?

제가 해결하려는 문제는 개별 하위 구성 요소가 수신하고 수정할 수 있는 상태를 동기화하여 다른 구성 요소에 새 상태로 렌더링하도록 경고하는 것입니다. auth 및 db 개체의 경우 해당 구성 요소에 넣을 수 있습니다.

"test: String"을 인증의 사용자로 바꾸겠습니다. null이면 개체가 됩니다. 이렇게 하면 사용자가 로그인했는지 여부를 확인할 수 있습니다. 모든 것이 IonReactRoute에 포함되어 있으며

States.tsx

으아악

button.tsx

으아악

홈.tsx

으아악

여기서 무슨 일이 일어나고 있는지 이해가 되지 않습니다. 반환을 하나의 요소로 묶고 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은 Subclass가 아닌 Superclass입니다.

입력 문제를 해결하는 한 가지 방법은 필드의 state 유형을 재정의하는 것입니다.

으아아아

또 다른 접근 방식은 상태에 대해 일반 React.Component

的类型参数，其中 P 代表 props，S 코드를 명시적으로 지정하는 것입니다.

으아아아