Reactjs 全局变量更改时重新加载

当全局变量更改时，我想重新命名我的组件。我的代码现在看起来像这样

window.loading = true;

setTimeout(() => {
  window.loading = false;
}, 4000);

class MyComponent extends React.Component {
  state = { rerender: window.loading }

  render() {
    return (
      <h1>{`Loading: ${this.state.rerender}`}</h1>
    )
  }
}

window.load=true；
设置超时（（）=>{
window.load=false；
}, 4000);
类MyComponent扩展了React.Component{
状态={rerender:window.loading}
render（）{
返回(
{`Loading:${this.state.rerender}`}
)
}
}

---

但是什么也没有发生，即使我可以看到window.loading在控制台中更新。

如果您想在全局属性更改后重新呈现组件，您应该使用Promise、RxJS或任何其他类似Observer的模式

在代码中的位置：

window.loading = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve();
  }, 300);
});

在您的组件中：

class MyComponent extends React.Component {

  state = { isLoaded: false }

  componentDidMount() {
   window.loading.then(() => 
     this.setState({isLoaded: true})
   )
  }


  render() {
    const {isLoaded} = this.state;
    return (
      ...
    )
  }
}

通过这种方式，可以在某些全局属性更改（已解决）后使组件重新渲染。关键是使用Promise而不是bool原语

---

希望这有帮助

您应该将全局变量作为道具传递给组件。当前，您的状态不会更新自身，因此不会重新呈现自身

class MyComponent extends React.Component {

constructor(props) {
super(props);
}

render() {
return ( <h1>{`Loading: ${this.props.rerender}`}</h1>)
}
}

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； } render（）{ 返回（{`Loading:${this.props.rerender}`}） } } 创建组件时，将其作为道具传递：

 <MyComponent rerender={window.loading }

我正在使用React钩子

const ChildComponent = ({ fuse }) => {
  const [legalText, setLegalText] = useState([]);

  window.loading = () => {
    setLegalText(JSON.parse(sessionStorage.getItem('legal')));
  };
}

我们在ChildComponent中创建了一个全局函数。你所需要做的就是调用window.loading应用程序中的任意位置，此功能将启动

一定要使用redux、mobX或上下文API。有些情况下，这很方便
您是否设法解决了这个问题？