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

Метод 1: условный рендеринг
Один простой подход заключается в условном рендеринге родительского компонента на основе значения состояния, которое отслеживает статус загрузки дочернего компонента. Вот пример использования React:

import React, { useState, useEffect } from 'react';
const ParentComponent = () => {
  const [isChildLoaded, setIsChildLoaded] = useState(false);
  useEffect(() => {
    // Simulating child component loading
    setTimeout(() => {
      setIsChildLoaded(true);
    }, 2000);
  }, []);
  return (
    <div>
      {isChildLoaded ? null : <ChildComponent />}
    </div>
  );
};
const ChildComponent = () => {
  return <h1>Child Component</h1>;
};
export default ParentComponent;

Метод 2: свойство отображения CSS
Другой подход заключается в манипулировании свойством CSS displayродительского компонента на основе статуса загрузки дочернего компонента. Вот пример:

import React, { useState, useEffect } from 'react';
const ParentComponent = () => {
  const [isChildLoaded, setIsChildLoaded] = useState(false);
  useEffect(() => {
    // Simulating child component loading
    setTimeout(() => {
      setIsChildLoaded(true);
    }, 2000);
  }, []);
  return (
    <div style={{ display: isChildLoaded ? 'none' : 'block' }}>
      <ChildComponent />
    </div>
  );
};
const ChildComponent = () => {
  return <h1>Child Component</h1>;
};
export default ParentComponent;

Метод 3: React Router
Если вы используете React Router для навигации, вы можете использовать параметры маршрута для управления видимостью родительского компонента. Вот пример:

import React from 'react';
import { useParams } from 'react-router-dom';
const ParentComponent = () => {
  const { childLoaded } = useParams();
  return (
    <div>
      {childLoaded ? null : <ChildComponent />}
    </div>
  );
};
const ChildComponent = () => {
  return <h1>Child Component</h1>;
};
export default ParentComponent;

В этой статье мы рассмотрели три различных метода скрытия родительского компонента при загрузке дочернего компонента. Используя условный рендеринг, манипулируя свойством CSS displayили используя React Router, вы можете добиться желаемого поведения в своих приложениях React. Выберите метод, который лучше всего соответствует требованиям вашего проекта, и наслаждайтесь оптимизированным пользовательским интерфейсом.