ReactJS:setState来自外部

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();
}
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:更改Loading的display

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

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

Answer 1

您的Loading和Tools组件是同级组件，因此在它们之间传递数据比较困难。

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

---

或者你可以在所有其他组件中重复使用你的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>
)
}
}