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

因此，我有一个父组件，就像路由器一样连接我应用程序中的所有组件

在my child

Login

组件中，如果用户成功登录，它将生成一个

token

，我希望将此

token

传递给父组件，以便它可以将用户引导到仪表板，并将

token

传递给该

仪表板

组件

我的

登录

的登录处理部分：

//...
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}来自'React'；
从“反应路由器”导入{Route，Switch}；
从“/components/Home”导入主页；
从“/components/MyNavbar”导入MyNavbar；
从“/components/auth/Register”导入寄存器；
从“/components/Dashboard/Dashboard”导入仪表板；
从“/components/auth/Login”导入登录名；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
令牌：“”，
用户名：“
}
}
新登录（令牌、用户名）{
这是我的国家({
令牌：令牌，
用户名：username
})
}
render（）{
返回(
}
/>
);
}
}
导出默认应用程序；

我读过，但它的父函数不接受任何参数

---

有没有办法从

Login

组件调用

newLogin（令牌、用户名）

方法？或者这种逻辑是错误的？

您可以使用React-context api并将应用程序与该身份验证上下文进行扭曲，以便它在整个应用程序中可用

      .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

---

您需要做的就是将父级中定义的

newlogin函数

作为道具传递给要在范围内的子级，因此，您应该定义登录路由器，以将Uri引用为呈现函数，而不是像在仪表板组件中那样引用字符串组件

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

newLogin（令牌、用户名）}
/>
}
/>

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

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

this.newLogin（令牌、用户名）}/>

是的，在传递到仪表板时，您可以在child-like-render={（props）=>}中将父函数作为道具传递。我建议您在应用程序中使用Redux。因此，您可以在整个应用程序中调用任何方法。MOBX也是redux的一个好的、更简单的替代品。感谢您提到本地存储！我绝对可以用的东西。

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