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;

我已經閱讀了這個示例 ，但是它的父函數沒有任何參數。

有沒有一種方法可以從Login組件中調用newLogin(token, username)方法？ 還是這個邏輯錯了？

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作為prop傳遞給子級，以使它在范圍內，因此，您應該定義登錄路由器，以將Uri稱為呈現函數，而不是字符串組件。您在儀表板組件中所做的

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