ReactJS： setState从外部[重复]

Question

这是我的pp.js

import React from 'react';
import './App.css'
import Tools from './components/class/Tools'
import Loading from './components/inc/Loading'

export default class App extends React.Component {
    componentDidMount() {
        Tools.showLoading();
    }

    render() {  
        return (
            <div className="App">
                <Loading />
            </div>
        )
    }
}

loading.js：

import React from 'react'

export default class Loading extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            display: 'none'
        }
    }

    render() {
        return (
            <div className="loading" style={{display: this.state.display}}>
                <span></span>
            </div>
        )
    }
}

我想从Tools.js中更改加载的显示：

export default class Tools extends React.Component {
    static showLoading(){ // or non-static
        Loading.setState ...
    }
}

如何从另一个类或函数或外部访问和设置State变量？

Answer 1

您的加载和工具组件是兄弟姐妹，因此很难在它们之间传递数据。

您应该将状态拉出到父App组件，然后您可以将setState回调方法和state.loading变量传递到工具和加载作为道具的组件。

或者，您可以在所有其他组件中重复使用加载组件，如下所示：

export default class Tool extends React.Component {

 constructor(props) {
        super(props)

        this.state = {
            loading: true
        }
    }

    render() {
        return (
            <Loading isloading={loading}>
            <div>
            // content here
            </div>
        )
    }
}