AWS Amplify-React Authenticator组件不可见

Question

使用https://aws-amplify.github.io/media/ui_library

构建身份验证UI

import { Authenticator } from 'aws-amplify-react'
import Amplify from 'aws-amplify';

Amplify.configure(aws_exports);

const AppWithAuth = () => (
 <Authenticator />
)

https://aws-amplify.github.io/docs/js/authentication#using-the-authenticator-component-directly

使用React Developer工具进行检查，组件在React View中可见

但不在浏览器的DOM视图中

因此，Authenticator的各种组件（如Greetings和SignIn）未显示在DOM中。如何使它们在浏览器中可见

[Auth and AuthData state after logging in] 4

[Console.logs] 5

Answer 1

组件基于authState属性呈现UI或不显示任何内容。在您的情况下，authState是signedIn。因此，只有Greetings会呈现一些UI。

Answer 2

身份验证器的各种组件（如Greetings和SignIn）未显示在DOM中。

看到您的authState当前位于signedIn，您实际上已经登录。这就是<SignIn>组件不可见/呈现的原因。如果您希望<SignIn>组件正常工作，则authState的值应为"signIn"，并且可以尝试将其硬编码为初始状态，以使其实际运行。 / p>

import React from "react";
import { Authenticator } from "aws-amplify-react";
import Amplify from "aws-amplify";
import aws_exports from "./aws-exports";

Amplify.configure(aws_exports);

const AppWithAuth = () => (
  <Authenticator
    // Optionally hard-code an initial state
    authState="signIn"
  />
);

对于<Greetings>，如果您的状态为signedIn，则应该显示它。您也可以尝试使用withAuthenticator高阶组件。

import React from "react";
import { withAuthenticator } from "aws-amplify-react";
import Amplify from "aws-amplify";
import aws_exports from "./aws-exports";

Amplify.configure(aws_exports);

const App = () => {
  return (
    <div>
      <h1>Hello world!</h1>
      <p>This is your own App Component</p>
    </div>
  );
};

export default withAuthenticator(App, {
  // Render a sign out button once logged in
  includeGreetings: true
});