AWS Amplify React HOC with Authenticator signupConfig

如何解决AWS Amplify React HOC with Authenticator signupConfig

我正在关注此 example，了解如何使用 aws-amplify 库拥有公共和受保护的路由。

我不明白的是如何像文档 here 中那样自定义注册表单字段。

我想使用 withAuthenticator HOC 来保护应用中的一些路由，但如果用户尝试注册，我想更改默认的国家/地区拨号代码，并请求一些额外的字段注册（例如姓名）。

当我使用 AmplifyAuthenticator 组件时，我可以遵循类似于下面的代码段的内容，但是相同的 formFields 对象不适用于 HOC。

const Protected = ({children}) => {
  return (
    <AmplifyAuthContainer>
      <AmplifyAuthenticator usernameAlias="email">
        <AmplifySignUp
          slot="sign-up"
          usernameAlias="email"
          formFields={[
            {
              type: "name",label: "Full Name *",placeholder: "Enter your full name",inputProps: { required: true,autocomplete: "name" },},{
              type: "email",autocomplete: "username" },{
              type: "password",autocomplete: "new-password" },{
              type: "phone_number",dialCode: "+31",]}
        />
        <AmplifySignIn slot="sign-in" usernameAlias="email" />
        <AmplifySignOut />
        {children}
      </AmplifyAuthenticator>
    </AmplifyAuthContainer>
  );
};