Question

我已经从react-google-login登录。我需要将电子邮件从一个名为Login的组件传递到另一个名为User的组件（用户应在其中查看其电子邮件）。

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      redirecting: false,
    };
  }
  render() {
    const responseGoogleSuccess = (response) => {
      this.setState({ email: response.profileObj.email });
      this.setState({ redirecting: true });
    };
    return (
      <div>
        <GoogleLogin
          clientId="myclientid"
          buttonText="Log in"
          onSuccess={responseGoogleSuccess}
          cookiePolicy={"single_host_origin"}
        />
        {this.state.redirecting ? <Redirect to="/user" /> : null}
      </div>
    );
  }
}

Answer 1

您必须将email状态移到common和Login组件的User父级，或者使用上下文API，您可以在{{ 3}}，实现您所想的最困难的方法是使用redux，这是一种状态管理

Answer 2

您有很多方法可以解决此问题。

1。<Redirect to={/user/${this.state.email}} />

您可以使用this.props.match.params.email

在用户组件中访问此电子邮件

2。您可以将电子邮件存储在redux存储中，并在用户组件中进行访问。

3。您可以使用上下文api。

将道具从组件传递到React上的另一个组件

2 个答案: