Question

因此，我有一个父组件，其作用类似于应用程序中所有组件的路由器。

在我的子Login组件中，如果用户成功登录，它将生成一个token，并且我希望将此token传递给父组件，以便它可以指导用户token传递到该Dashboard组件。

我的Login的登录处理部分：

//...
handleSubmit = event => {
    event.preventDefault();

    let username = this.state.username;
    let password = this.state.password;

    SignInAndGetToken(username, password)
      .then(response => {
        if (response.data["code"] === 200) {
          let newToken = response.data["token"];
          console.log("token = " + newToken);

          console.log("submitting with username: " + username + " pwd: " + password);
          this.props.newLogin(newToken, username)
        }
      })
      .catch(function (error) {
        console.log(error);
      })
  };
// ...

// SignInHandler.js
export const SignInAndGetToken = (username, password) =>
  Axios.post(LoginPath, {
    "username": username,
    "password": password
  });

父项（App.js）：

import React, {Component} from 'react';
import {Route, Switch} from "react-router";
import Home from "./components/Home";
import MyNavbar from "./components/MyNavbar";
import Register from "./components/auth/Register";
import Dashboard from "./components/dashboard/Dashboard";
import Login from "./components/auth/Login";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      token: "",
      username: ""
    }
  }

  newLogin(token, username) {
    this.setState({
      token: token,
      username: username
    })
  }

  render() {
    return (
      <React.Fragment>
        <MyNavbar/>
        <Switch>
          <Route exact path="/" component={Home}/>
          <Route path="/login" component={Login}/>
          <Route exact path="/register" component={Register}/>

          <Route path="/dashboard"
                 render={(props) =>
                   <Dashboard {...props}
                              token={this.state.token}
                              username={this.state.username}/>
                 }
          />
        </Switch>
      </React.Fragment>
    );
  }
}

export default App;

我已经读过this example，但是它的父函数没有任何参数。

是否可以从newLogin(token, username)组件中调用该Login方法？还是这种逻辑是错误的？

Answer 1

根据您的代码，您需要像下面的代码那样传递newLogin函数来登录路由，和因为我认为这不是正确的方法，所以您做了什么您需要将该令牌存储在本地存储中，以便在整个系统中使用该令牌

<Route path="/login" render={(props) => <Login {...props} newLogin= {(token, username) => this.newLogin(token, username)} /> } />

Answer 2

您可以使用React上下文api并使用该Auth上下文扭曲您的应用程序，以便它在您的整个应用程序中可用。

      .then(response => {
        if (response.data["code"] === 200) {
          let newToken = response.data["token"];
          console.log("token = " + newToken);

          console.log("submitting with username: " + username + " pwd: " + password);
          this.props.newLogin(newToken, username)

---------------------------------------------------------------

Here you can set this token in Auth context and as well in storage.
then redirect it to the dashboard screen using route props which is available there.

==================  *****************  ============
other approach

call callback here with tokens

        }
      })
      .catch(function (error) {
        console.log(error);
      })```


**********************************************

other approach is just pass a callback prop to this screen, as you have done with Dashboard using render function and call it with token and do stuff in App.js file. Just check for route props there*

Hope this helps

Answer 3

您需要做的就是将您在父级中定义的newlogin function作为道具传递给子级，因此，您应该定义登录路由器以将Uri称为渲染函数而不是像在仪表板组件中那样使用字符串组件

<Route path="/login"
       render={(props) =>
             <Login {...props}
                    newLogin= {(token, username) => newLogin(token, username)} 
             />
      }
 />

React：如何将参数传递给父组件

3 个答案: