Question

<块引用>

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

<块引用>

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

<块引用>

工具.js

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

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

我在整个项目中使用 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 global state 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')
}

Reactjs：从组件外部设置状态

3 个答案: