0

ユーザー認証に Typescript と AWS Amplify を使用して反応アプリを作成しようとしています。サインアップ フィールドを電子メールとパスワードのみに制限したい。

AWS docによると、以下に示す最小限の例でこれを達成できるはずですが、

TypeScript error in ......../frontend/src/App.tsx(43,41):
Argument of type '{ signUpConfig: { header: string; hideAllDefaults: boolean; signUpFields: { label: string; key: string; required: boolean; displayOrder: number; type: string; }[]; }; }' is not assignable to parameter of type 'AmplifyAuthenticator & HTMLAttributes<HTMLAmplifyAuthenticatorElement> & ReactProps & RefAttributes<...>'.
  Object literal may only specify known properties, and 'signUpConfig' does not exist in type 'AmplifyAuthenticator & HTMLAttributes<HTMLAmplifyAuthenticatorElement> & ReactProps & RefAttributes<...>'.  TS2345

    41 |   };
    42 | 
  > 43 | export default withAuthenticator(App, { signUpConfig });
       |                                         ^
    44 |

最小限の例

import './App.css';
import React from 'react';
import awsConfig from './amplify-config';

import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
import Amplify from 'aws-amplify';

Amplify.configure(awsConfig);

function App() {
  return (
    <div className="App">
        
    <AmplifySignOut />
      <header className="App-header">
        Test
      </header>
    </div>
  );
}

const signUpConfig = {
    header: 'My Customized Sign Up',
    hideAllDefaults: true,
    signUpFields: [
      {
        label: 'My custom email label',
        key: 'email',
        required: true,
        displayOrder: 1,
        type: 'string'
      },
      {
        label: 'My custom email label',
        key: 'password',
        required: true,
        displayOrder: 2,
        type: 'password'
      }
    ]
  };

export default withAuthenticator(App, { signUpConfig });

signUpConfig の typescript Type が何であるかを理解しようとしました。だと思いますがComponentPropsWithRef<typeof AmplifyAuthenticator>、signUpConfig オブジェクトに何を入れるか、またはなぜ機能しないかについては、まったく役に立ちません。エラーメッセージによると、タイプは ですが'AmplifyAuthenticator & HTMLAttributes<HTMLAmplifyAuthenticatorElement> & ReactProps & RefAttributes<...>'、それもまったく役に立ちません。

を渡さなければsignUpConfig、アプリは期待どおりに動作します。

signUpConfigでラップせずに渡すと{}、このエラーが発生します。

Type '{ header: string; hideAllDefaults: boolean; signUpFields: { label: string; key: string; required: boolean; displayOrder: number; type: string; }[]; }' has no properties in common with type 'AmplifyAuthenticator & HTMLAttributes<HTMLAmplifyAuthenticatorElement> & ReactProps & RefAttributes<...>'.
4

1 に答える 1

3

最新バージョン (今日は 2021 年 4 月 21 日) の@aws-amplify/ui-reactライブラリはスロットに基づいており、構成にはわずかに異なるアプローチが必要です。私にとってうまくいったのは、増幅ドキュメントのこの例です: https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#customization

于 2021-01-30T16:28:42.273 に答える