Загрузка страницы в ReactJS и компонент постоянной перезагрузки

Question

В моем проекте у меня есть несколько компонентов, один из которых - div, который состоит из нескольких других компонентов и представляет собой кнопку, и его использование похоже на меню.

Попытка сделать загрузочную страницу наложенной наДля предотвращения действий во время зарядки компонентов я изменил свой код:

1) Включая в конструктор:

this.state = {
    isLoaded: false
}

2) Добавление метода componentDidMount ():

componentDidMount() {
    this.setState({
        isLoaded: true
    })
}

3) Изменение метода рендеринга:

const isLoaded = this.state.isLoaded;
if (!isLoaded) {
    document.getElementById("loadingPageHTML").style.display = "inline-block";
    return(
        <p className = "noShowIt"> Hola </p>
    );
} else {
    document.getElementById("loadingPageHTML").style.display = "none";
    return (
        <div className="MainMenuButtons">
        ...
}

Но когда я отлаживаю в своем браузере, я вижу, что когда я нажимаю одну из этих кнопок, поток всегда вводится в метод рендеринга этого компонента,Таким образом, страница загрузки display всегда находится в состоянии inline-block, даже если второй компонент (с тем же состоянием и условиями) не загружен.

Как создать загрузочный слой с хорошим поведением?

Возможно ли сделать это аналогично функции ajaxStart в jQuery?

Answer 1

Вы как бы смешиваете реагирующие компоненты со старым стилем веб-разработки.

Вы хотите визуализировать загружаемый компонент или компоненты контента на основе состояния isLoaded, а не использовать селекторы css и dom.например:

render () => (!isLoaded) ? <LoadingComponent /> : <Content />;

render() {
   if (!isLoaded) {
     return <LoadingComponent />;
   } else {
     return (<div> ... </div>);
   }
}

При изменении состояния отображаемые компоненты автоматически обновляются