Reactjs：来自另一个类或函数的setState答案

【问题标题】：Reactjs: setState from another class or functionReactjs：来自另一个类或函数的setState
【发布时间】：2021-06-17 11:08:27
【问题描述】：

我的加载组件：

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>
        )
    }
}

我想把display从App.js改成

Loading.setState ...

或者

var lng = new Loading()
lng.setState ...

这两个都不行

我希望可以从另一个类或函数更改状态

【问题讨论】：

由于是 App.js 的子组件，所以需要将 props 传递下去
App.js 就是一个例子。也许我想从另一个组件中更改它。 @PrakashS
我相信你需要更好地理解react。您提到的两种方式实际上并不代表应该如何使用反应组件。对于这种特殊情况，我建议将状态保留在父组件 (App) 并将状态作为 prop 发送到 Loading 组件。 <Loading display={display} />
@parkourkarthik App.js 就是一个例子。也许我想从另一个组件中更改它。
那么像redux 这样的全局状态管理器库会有所帮助

标签： javascript reactjs

【解决方案1】：

如果您想将 display 从 App.js 更改为：

将其作为 prop 传递给Loading 组件，并将状态保持在App.js。
从App.js 传递一些道具，当它改变时 - 改变状态 display 中的 App.js
使用一些全局状态/存储管理器，例如 Redux 或内置的 useContext react-hook，在这种情况下，您将能够从连接到存储的任何组件进行更改

【讨论】：

如果我想从另一个班级改变？除了 App.js 吗？
然后是选项编号 3
谢谢。你能给我一个例子吗？

【解决方案2】：

Solution sample

可以在代码沙箱示例中找到一个简单的解决方案。

【讨论】：