React TypeScript에 소품을 입력하는 방법은 무엇입니까?

Question

React TypeScript에서 props를 어떻게 입력하나요? '[Props] & {children?: ReactNode;'}'.ts 유형에 'authors' 속성이 존재하지 않는다는 오류가 발생합니다. 이름과 비밀번호 키로 구성된 배열이 전달될 것으로 예상됩니다.

https://codesandbox.io/s/test-login-page-tasks-24-04-forked-eg91s5?file=/src/comComponents/Login.tsx:229-274

으아아아

, 소품을 전달하는데도.

Answer 1

IUser 유형을 사용하여 IUser 인터페이스를 정의하고 이름, 비밀번호 상태를 정의하면 다음과 같이 정의할 때 문제가 발생합니다.

으아악

이름, 비밀번호는 문자열이기 때문에 틀리므로 다음과 같이 정의해 보세요.

으아악

그런 다음 작성자를 FC 구성 요소로 전달하는 문제를 해결해야 합니다.

으아악

App.tsx에서 전달된 데이터 유형과 일치하도록 이 유형을 수정해야 하는 마지막 사항:

으아악

다음과 같이 앱에서 전달합니다.

으아악

Answer 2

아래 그림과 같이 [Props] 更改为 Props변경해 보세요

으아아아

이제 배열 대신 객체가 필요하기 때문에 작동합니다. <Loginauthors={authors} />와 같은 객체를 전달하겠습니다. 이제 작성자는 객체의 배열이 됩니다.