在 componentDidMount 中渲染一个新组件 - React

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

你可以按你的状态渲染你的组件。

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

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

您可以使用state 进行跟踪。

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

在render:

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