Question

我在一个无状态功能组件中有一个加载微调器，当我检查道具时，我正在使用它。

我想使用setTimeout让加载微调器显示5秒钟，然后在道具仍然不可用时更改内容，但此代码似乎无效：< / p>

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。

Answer 2

使您的组件有状态，以便您可以轻松更改其状态。

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>

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

2 个答案: