Reactjs：从组件外部设置状态

Question

应用程序.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(); // or new Tools();
    }

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

加载.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>
        )
    }
}

工具.js

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

我想从Loading组件外部更改display状态。

我在整个项目中使用Loading ，我想创建处理它的函数。

其他用途的示例：

function xxx(){
    Tools.showLoading(); // or new Tools();
}

或者：

<span onClick={Tools.showLoading(); // or new Tools();}></span>

实际上，我只想创建一个函数来管理和处理Loading显示。

Answer 1

虽然您可以轻松地向外部公开 setState 函数，但它的作用与任何其他函数一样，通常不是一个好主意。 相反，您应该考虑重写您的 Loading 组件以使用属性对象来告诉它它是否正在加载并在组件树的更高层跟踪加载状态，在那里它可以被想要更改其状态的事物访问。

Answer 2

我认为你可以使用 redux 作为 store manager 全局状态https://redux.js.org/另一种方式通过 props 传递它并在父组件处理它

Answer 3

在Tools.js

let loadingStateSetter = null

export function setLoadingStateSetter(setter) {
    loadingStateSetter = setter
    return () => loadingStateSetter = null
}

export function setLoadingState(value) {
    if (loadingStateSetter !== null) loadingStateSetter(value)
}

在Loading.js ：

import { setLoadingStateSetter } from './Tools.js'

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

    componentDidMount() {
        this.removeStateSetter = setLoadStateSetter((value) => {
            this.setState((state) => ({
                ...state,
                display: value,
            })
        })
    }

    componentWillUnmount() {
        this.removeStateSetter()
    }
}

用法：

import { setLoadingState } from './Tools.js'

function xxx(){
    setLoadingState('some value')
}