Question

我想知道如果我能做出反应，我想从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文件只是我想要实现的一个例子我知道这个文件不起作用，但我想知道如果有一种方法可以实现这样的反应，希望你能帮助我，谢谢。

Answer 1

更常见的做法是将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函数，那么它就是一个非常相似的概念。只需传递函数并在那里调用它。

Answer 2

你应该使用道具。调用将函数传递给子组件或者只是将值作为prop传递给App组件并调用父组件中的函数

从JS文件调用组件功能

2 个答案: