javascript - 超时后在无状态组件中执行功能

Question

我在检查 Prop 时使用的无状态功能组件中有一个加载微调器。

我想使用 setTimeout 让加载微调器显示 5 秒，然后在 Prop 仍然不可用时更改内容，但这段代码似乎不起作用:

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

我认为这是行不通的，因为没有任何反应可以重新渲染该组件，但如果可能的话，我不希望升级到容器。

Answer 1

将计时器移至父级。让计时器更改状态值并在其渲染中将该状态值作为 Prop 传递给您的 LoadingIndicator。