Визуализация нового компонента внутри componentDidMount - React - PullRequest
Новая
       4

Визуализация нового компонента внутри componentDidMount - React

0 голосов
/ 16 февраля 2020

Мне придется визуализировать новый компонент после загрузки всех ожидаемых компонентов. Мне понадобится тайм-аут, на основе которого должен быть представлен новый компонент. Таким образом, этот новый компонент должен появиться через 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);
    }

Может кто-нибудь помочь мне вызвать функцию рендеринга new_component внутри componentDidMount, пожалуйста. я попробовал new_component.render (). Но это не похоже на работу.

Ответы [ 3 ]

3 голосов
/ 16 февраля 2020

Вы можете использовать state для отслеживания этого. 

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

и в render: 

render() {
    if (this.state.showNewComponent) {
         return <NewComponent />
    }
    return null
}
0 голосов
/ 16 февраля 2020

вы можете визуализировать ваш компонент по вашему состоянию. 

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>)
  }
}
0 голосов
/ 16 февраля 2020

Вы можете go с этим кодом, подождать и затем отрендерить новый: 

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

:)

...