超时后在无状态组件中执行函数

Execute function in stateless component after timeout

本文关键字：执行 函数 组件 状态 超时      更新时间：2023-09-26

我在一个无状态的功能组件中有一个加载旋转器，我在检查props时使用它。

我想使用setTimeout有加载旋转器显示5秒，然后改变内容，如果道具仍然不可用，但这段代码似乎不工作:

function LoadingIndicator() {
  let content = <span>Loading Spinner Here</span>;
  setTimeout(() => {
    console.log('6 second delay');
    content = <span>Page could not be loaded.</span>;
  }, 6000);
  return (
    <div>
      {content}
    </div>
  );
}

我相信这是行不通的，因为没有告诉react重新渲染这个组件，但我宁愿不升级到一个容器，如果可能的话

将计时器移到父节点。让计时器改变一个状态值，并在其渲染中，将该状态值作为道具传递给LoadingIndicator。

让你的组件有状态，这样你就可以很容易地改变它的状态。

class SpinnerComponent extends React.Component {
  constructor() {
    super();
    this.state = { tooLong: false };
  }
  
  componentDidMount() {
    var thiz = this;
    
    setTimeout(function () {
      thiz.setState({ tooLong: true });
    }, 1000);
  }
  
  render() {
    let content = 'Spinner...';
    
    if (this.state.tooLong) {
      content = 'It takes too much time...';
    }
    return (
      <div>{content}</div>
    );
  }
};
ReactDOM.render(
  <SpinnerComponent />,
  document.getElementById("app")
);
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

相关文章：