React:如何将参数传递给父组件
React:如何将参数传递给父组件
提问于 2019-09-06 16:10:16
因此，我有一个父组件，它充当应用程序中所有组件的路由器。
在我的子Login组件中，如果用户成功登录，它将生成一个token，我希望将此token传递给父组件，以便它可以将用户定向到仪表板，并将token传递给该Dashboard组件。
My 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)方法？或者，这种逻辑是错误的？
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-09-06 18:59:46
根据您的代码，您需要将newLogin函数传递给登录路由，如下面的代码所示，我认为这不是正确的方式，您需要将该令牌存储在本地存储中，以便在整个系统中使用该令牌
<Route path="/login" render={(props) => <Login {...props} newLogin= {(token, username) => this.newLogin(token, username)} /> } />Stack Overflow用户
发布于 2019-09-06 18:24:29
您可以使用React context api并使用该Auth context来调整您的应用程序，以便它在整个应用程序中都可用。
.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 helpsStack Overflow用户
发布于 2019-09-06 18:42:56
您需要做的就是将在父级中定义的newlogin function作为道具传递给要在作用域中的子级。因此，您应该定义登录路由器，使其将Uri作为呈现函数引用，而不是像在仪表板组件中那样将Uri引用为字符串组件
<Route path="/login"
render={(props) =>
<Login {...props}
newLogin= {(token, username) => newLogin(token, username)}
/>
}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57818112
复制相关文章
相似问题
腾讯云开发者
