Question

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

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.loading在控制台中更新了。

Answer 1

如果要在全局属性更改后重新渲染组件，则应使用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原始

希望有帮助

Answer 2

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

class MyComponent extends React.Component {

constructor(props) {
super(props);
}

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

当创建组件时，将其作为道具传递：

 <MyComponent rerender={window.loading }

Answer 3

我正在使用React Hooks

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

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

我们在ChildComponent内部创建了一个全局函数。您需要做的就是调用window.loading在应用程序中的任何地方，此功能将触发。

绝对使用redux，mobX或上下文API。在某些情况下，这很方便

全局变量更改时重新渲染

3 个答案: