reactjs - AWS Amplify React HOC with Authenticator signupConfig

Question

我正在关注这个示例aws-amplify，了解如何在图书馆拥有公共和受保护的路线。

我无法理解的是如何自定义注册表单字段，如此处的文档中所示。

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

当我使用该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",
              inputProps: { required: true, autocomplete: "username" },
            },
            {
              type: "password",
              inputProps: { required: true, autocomplete: "new-password" },
            },
            {
              type: "phone_number",
              dialCode: "+31",
            },
          ]}
        />
        <AmplifySignIn slot="sign-in" usernameAlias="email" />
        <AmplifySignOut />
        {children}
      </AmplifyAuthenticator>
    </AmplifyAuthContainer>
  );
};