Question

加载所有预期的组件后，我将不得不渲染一个新组件。我将需要一个超时，基于该超时必须渲染新组件。因此，该新组件必须在页面加载后5分钟后显示。我需要渲染一个名为new_component的组件，该组件扩展了React.component

public componentDidMount(): void {
      if (visited) {
      setTimeout(() => {
        console.log('Reached the timeout')
        //Render the new conponent here. (Not sure how to call the render function of another component here)
      }, timeout);
    }

有人可以帮我在componentDidMount内部调用new_component的渲染功能吗？我尝试过new_component.render（）。但这似乎不起作用。

Answer 1

您可以使用state进行跟踪。

componentDidMount() {
    setTimeout(() => {
        this.setState({ showNewComponent: true })
    })
}

和render中的

：

render() {
    if (this.state.showNewComponent) {
         return <NewComponent />
    }
    return null
}

Answer 2

您可以使用此代码，等待，然后渲染新代码：

cosnt FIVE_MIN = 5 * 60 * 1000

class Example {
  this.state = { isShowComponent: false }
  timer 

  componentDidMount() {
    this.timer = setTimeout(() => {
      this.setState({ isShowComponent: true })
    }, FIVE_MIN) 
  }

  componentWilllUnmount() {
    clearTimeout(this.timer)
  }

  render() {
    if (this.state.isShowComponent) return <NewComponent />

    return <Component />
  }
}

：）

Answer 3

您可以按状态渲染组件。

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isTimeout: false,
    };
  }
  componentDidUpdate(prevProps, prevState) {
    this.checkTimeout = setTimeout(() => { 
      this.setState(() => ({isTimeout: true}))
    }, 500);
  }
  componentWillUnmount() {
    // clean it up when the component is unmounted.
    clearTimeout(this.checkTimeout);
  }
  render () {
    if (isTimeout) {
        return (k<h1>time is running out</h1>)
    }

    return (<h1>hello world.</h1>)
  }
}

在componentDidMount内部渲染一个新组件-React

3 个答案: