Как заменить компонент по нажатию кнопки?

Чтобы заменить компонент при нажатии кнопки в React, можно использовать состояние (state) компонента.

В самом простом случае, мы можем использовать флаговую переменную в состоянии компонента для определения того, какой компонент должен быть отображен. Например, создадим переменную "showComponent" в состоянии, которая будет определять, должен ли быть видим текущий компонент или нет.

import React, { useState } from 'react';

function App() {
  const [showComponent, setShowComponent] = useState(true);

  const toggleComponent = () => {
    setShowComponent(!showComponent);
  };

  return (
    <div>
      {showComponent ? <ComponentA /> : <ComponentB />}
      <button onClick={toggleComponent}>Toggle Component</button>
    </div>
  );
}

function ComponentA() {
  return <h1>Component A</h1>;
}

function ComponentB() {
  return <h1>Component B</h1>;
}

В данном примере, начальное состояние "showComponent" равно true, а значит будет отображаться компонент ComponentA. При нажатии на кнопку "Toggle Component", вызывается функция toggleComponent, которая изменяет значение переменной showComponent на противоположное. Это приведет к перерисовке компонента и отображению другого компонента в зависимости от значения переменной showComponent.

Очень важно обратить внимание на использование фигурных скобок внутри JSX для определения условных операторов.

{showComponent ? <ComponentA /> : <ComponentB />}

В данном случае, если showComponent равно true, будет отображаться компонент ComponentA, в противном случае будет отображаться компонент ComponentB.

Это простой пример, и в зависимости от потребностей проекта, можно использовать более сложную логику для замены компонентов. Вместо флаговой переменной, можно использовать, например, перечисление (enum) для определения возможных значений. Также можно использовать условные операторы, switch-кейсы или массивы для определения списка доступных компонентов и их порядка. Вариантов реализации замены компонентов по нажатию кнопки в React достаточно много, и выбор конкретного подхода зависит от требований и логики вашего приложения.