Вопросы Теги

create-реагировать-приложение: как загрузить HTML перед рендерингом React

Теперь это можно сделать в Chrome, Safari, FF4 + и IE10pp4 +!

См. ответ этого вопроса для получения дополнительной информации: Обновление адресной строки с новым URL без хеша или перезагрузка страницы

Пример: 

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

Затем вы можете использовать window.onpopstate для поиска навигации по кнопке назад / вперед: 

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

Более подробный обзор манипулирования историей браузера см. В этой статье MDN .

0
задан Sonic Soul 20 March 2019 в 12:53
поделиться

3 ответа

Это пример того, как показать загрузчик в течение пяти секунд, используя state и setTimeout(). Вместо <Loader/> вы можете указать splash screen component. 

import React, { Component } from 'react';

import Drawer from '../Drawer/Drawer';
import Loader from '../../components/UI/Spinner/Loader/Loader';

class App extends Component {
  state = {
    loading: true
  }

  componentDidMount(){
    setTimeout(() => {
      this.setState({loading: false});
    }, 5000);
  }

  render() {  
    return (
      <React.Fragment>
        {
          this.state.loading ? <Loader />: <Drawer />
        }
      </React.Fragment>
    );
  }
}

export default App;

Надеюсь, это поможет!

0
ответ дан Avinash Mahlawat 20 March 2019 в 12:53
поделиться

Так что просто зайдите в ваш index.html внутри вашей общей папки и внутри

<div id="root"><-- Add Splash screen html code here --></div>

добавьте ваш код заставки, когда реагирует на загрузку, он заменяет весь контент внутри div id root

0
ответ дан Rishabh Rawat 20 March 2019 в 12:53
поделиться

Я не уверен, будет ли это работать вообще, это не проверено, но, может быть, оно приведет вас в правильном направлении? Итак, вот мои 2 цента

withSplash.js 

const withSplash = MyAppComponent => 
  class extends React.Component {
    state = {
      showSplash: true
    }

    componentDidMount () {
      handleSplashComponent(); 
    }

    componentWillUnmount () {
      if (this.timer) {
        this.timer = null;
      }
    }

    handleSplashComponent = () => {
      this.timer = setTimeout(()=> {
        this.setState({
          showSplash: false
        })
      }, 3000)
    }

    render () {
      return this.state.showSplash
        ? <SplashComponent />
        : <MyAppComponent />
    }
  }

App.js 

class App extends Component {
  ...
}

export default withSplash(App);

[119 ] AnotherComponent.js 

class AnotherComponent extends Component {
  ...
}

export default withSplash(AnotherComponent);
0
ответ дан Shawn Yap 20 March 2019 в 12:53
поделиться
Другие вопросы по тегам:

Похожие вопросы: