在React上将道具从一个组件传递给另一个组件

Question

我已经做了一个登录，从 react-google-login. 我需要从一个叫作 "Component "的组件中传递电子邮件。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

你有很多方法来解决这个问题。

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

你可以在用户组件中使用this.props.match.params.email来访问这个电子邮件。

2.可以将邮件存储在redux store中，在用户组件中访问。

3.你可以使用context api。

Answer 2

你必须把你的 email 沦为 common 你的父母 Login 和 User 组件或使用上下文api，你可以在 文件, 要实现你的想法，最难的路径是使用redux，它是一个状态管理