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

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，但它的父函数不接受任何参数。

有没有办法从 Login 组件调用 newLogin(token, username) 方法？还是这个逻辑错了？

Answer 1

您可以使用 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 2

您需要做的就是将您在父项中定义的 newlogin function 作为 prop 传递给子项以使其在范围内，因此，您应该定义登录路由器以将 Uri 引用为呈现函数而不是像在仪表板组件中那样使用字符串组件

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

Answer 3

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

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

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

React: How to pass an argument to a parent component

javascript

arguments

reactjs

react-props