我想知道如果我能做出反应,我想从JS文件调用react组件的函数或方法,所以我可以改变该组件的状态。
我有这三个文件,例如
First App.js
import React,{Component} from 'react';
import Login from './Login';
class App extends Component{
constructor(){
super();
this.state = {session:false}
}
changeStateSession(state_session){
this.setState({session:state_session});
}
render(){
return(
this.state.session
?<div>Content</div>
:<Login/>
);
}
}
Login.js
import React, {Component} from 'react';
import Auth from './Auth.js';
class Login extends Component{
constructor(){
super();
}
login(){
Auth.login();
}
render(){
return(
<button onClick={(e)=>login(e)}></button>
);
}
}
和Auth.js
import App from './../../App.js';
const Auth = {
login:App.changeStateSession(true)
};
export default Auth;
我真正想知道的是,如果我可以从Auth.js文件调用App函数(changeStateSession),那么Auth.js文件只是我想要实现的一个例子我知道这个文件不起作用,但我想知道如果有一种方法可以实现这样的反应,希望你能帮助我,谢谢。
答案 0 :(得分:3)
更常见的做法是将changeSessionState
函数作为道具传递给Login
组件。
App.js:
class App extends Component {
constructor(props) {
super(props);
this.state = { session: false }
this.changeStateSession = this.changeStateSession.bind(this);
}
changeStateSession(stateSession){
this.setState({ session: stateSession });
}
render(){
return (
this.state.session
? <div>Content</div>
: <Login onSuccess={() => this.changeStateSession(true)} />
);
}
}
Login.js:
class Login extends Component {
constructor(props) {
super(props);
}
login(){
// If your login process is asynchronous
// and returns a Promise, for example
Auth.login()
.then(this.props.onSuccess);
}
render() {
return (
<button onClick={(e)=> this.login(e)}></button>
);
}
}
现在,当您的登录成功后调用this.props.onSuccess
时,您的App
组件状态将会更新,因为您的changeStateSession
方法已作为道具传递给您的{{ 1}}组件。
这里最重要的一点是,如果要从子组件更新父级状态,将函数从父组件传递到子组件是通常处理它的方法。建议不要使用其他方式更新孩子的父状态。
此外,如果绝对有必要从Login
文件中调用changeStateSession
函数,那么它就是一个非常相似的概念。只需传递函数并在那里调用它。
答案 1 :(得分:0)
你应该使用道具。调用将函数传递给子组件或者只是将值作为prop传递给App组件并调用父组件中的函数