дом готов событие в React - Отличная библиотека

У меня есть некоторые компоненты, как показано ниже:дом готов событие в React

Wrapper: завернуть Loader и Page

Погрузчик: некоторые анимации

Страница: содержание страницы

код:

<body> 
    <div id="app"></div> 
</body> 

class Loader extends Component {} 

class Page extends Component {} 

class Wrapper extends Component { 
    render() { 
     return (
      <Loader/> 
      <Page /> 
     ); 
    } 
} 

ReactDOM.render(<Wrapper />, document.getElementById('app'));

Я хочу скрыть загрузчик и показать компонент страницы после того, как DOM загружен.

Как написать событие готовности дома в React?

как JQuery: $(window).on('ready')

источник

2016-07-29 lam

TL; DR Если я правильно понимаю, то ответ, вероятно, "не представляется возможным". Но есть другое решение ...

Вот что я думаю, что вы пытаетесь сделать, описано как последовательность шагов:

страница начинает загрузку, <Loader /> компонент показывает «загрузки страницы» анимация
страница заканчивается загрузка, <Loader /> компонент удален (или скрыт) и <Page /> компонент вставлен (или показан) с «настоящим» содержанием страницы.

Вот проблема: помните, что Вы вводите свои React компоненты на страницу, как это:

ReactDOM.render(<Wrapper />, document.getElementById('app'));

Вы не можете на самом деле впрыснуть Реагировать компонент, пока не будет загружен DOM. Таким образом, к этому времени либо <Loader /> появляется примерно на 2 миллисекунды, либо исчезает, или вообще не появляется (поскольку DOM уже загружен к тому времени, когда он будет введен на страницу).

Если вы пытаетесь показать Throbber или другой простой анимации (например, анимированного GIF), я хотел бы попробовать гибридный подход:

Настройка HTML как это:

<body> 
    <div id="app"><img src="throbber.gif" /></div> 
</body>

в вашем тег сценария, включают в JQuery «документ готов» обработчик событий для загрузки Реагировать компонента:

class Page extends Component {} 

class Wrapper extends Component { 
    render() { 
     return (
      <Page /> 
     ); 
    } 
} 

$(document).ready(function() { 
    ReactDOM.render(<Wrapper />, document.getElementById('app')); 
});

Обратите внимание, что я ушел из <Loader /> - Throbber изображение делает работа погрузчика.

Идея заключается в том, что во время загрузки страницы, то Throbber GIF будет пульсирующая далеко до DOM загружен, после чего документ готов событие JQuery будет стрелять & содержимое div#app будет заменен.

Я не пробовал это, но должны работы, при условии, что на самом деле Реагировать заменяет содержание div#app, а не просто добавляя материал к нему. Если это не так, то просто заменить обработчик документа на что-то вроде этого:

$(document).ready(function() { 
    $('div#app img').remove(); 
    ReactDOM.render(<Wrapper />, document.getElementById('app')); 
});

источник

2016-07-29 04:35:03 Kryten

Это работает, React заменит содержимое точки монтирования. Важно, чтобы любой CSS, от которого зависел загрузчик, доступен до того, как React монтируется, поэтому встроенный блок '