React TypeScriptにpropsを入力するにはどうすればよいですか?

Question

React TypeScript に props を入力するにはどうすればよいですか? 「プロパティ 'authors' はタイプ '[Props] & {children?: ReactNode;'}'.ts に存在しません」というエラーが表示されます。名前とパスワードのキーで構成される配列が渡されることを期待しています。

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

リーリー

、小道具を渡しているにもかかわらず。

Answer 1

IUser タイプを使用して IUser インターフェイスを定義し、名前とパスワードのステータスを定義します。これを定義すると問題が発生します。

リーリー

名前、パスワードは文字列であるため、これは間違っているため、次のように定義してみてください:

リーリー

次に、作成者を FC コンポーネントに渡すことを修正する必要があります:

リーリー

App.tsx から渡されたデータ型と一致するようにこの型を修正する必要がある最後の作業:

リーリー

そして、次のようにアプリケーションからそれを渡します:

リーリー

Answer 2

以下に示すように、[Props] を Props に変更してみてください

リーリー

配列ではなくオブジェクトが必要なため、これで機能します。<Loginauthors={authors} /> のようなオブジェクトを渡します。ここで、作成者はオブジェクトの配列になります。