Question

调用setTimeOut（Question，3000）后，收到错误消息“无法将类作为函数调用”。 “ Question”必须是一个类，以便获取类所接收的生命周期方法。

到目前为止，我发现的唯一答案是在类中包含“扩展React.Component”。

import React from 'react';
import Question from './Question';

setTimeout(Question, 3000);


function Congratulations(props) {
    return(
        <div>
        <h1>Congraulations you are the champion.</h1>
        <h2>Your Score: {props.score}</h2>
    </div>
    )
}  
export default Congratulations;

Question组件类的前几行。

export default class Question extends React.Component {
constructor(props) {
    super(props);

我希望Question在3秒后出现在DOM上。

Answer 1

超时不是您的问题，您只是没有Reacts设置代码。签出React-Dom's render method.您需要将设置代码包装在一个函数中，然后使用setTimeout触发该函数。如果您直接调用它，即使React函数组件也不会做很多事情，就像setTimeout那样。

Answer 2

您可以在componentdidmount方法中使用，并在3秒钟后设置显示状态。在render方法中，只有在show为true时才可以渲染。

在构造方法中，使用show = false创建状态。

您可以在componentDidMount中创建

setTimeOut(() => this.setState({ show: true}), 3000)

在render方法中，您可以使用该状态进行渲染

{
 show &&
  // render what you want
}

如何在组件类上调用setTimeOut

2 个答案: