Создание свертываемых компонентов React

Введение

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

Свертываемое содержимое

В ВМ уже предоставлены index.html и script.js. В общем, вам нужно только добавить код в script.js и style.css.

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

1. Используйте хук useState() для создания переменной состояния isCollapsed, которая представляет, свернуто или развернуто содержимое в данный момент. Инициализируйте ее значением collapsed.
2. Используйте элемент <button> для переключения состояния isCollapsed и отображения/скрытия содержимого, переданного через пропс children.
3. Используйте isCollapsed для применения соответствующего CSS-класса к контейнеру содержимого, либо collapsed, либо expanded, что определяет его внешний вид.
4. Обновите атрибут aria-expanded контейнера содержимого в зависимости от состояния isCollapsed, чтобы сделать компонент доступным для пользователей с ограниченными возможностями.

Вот CSS-код, необходимый для этого компонента:

.collapse-button {
  display: block;
  width: 100%;
}

.collapse-content.collapsed {
  display: none;
}

.collapse-content.expanded {
  display: block;
}

И вот JavaScript-код:

const Collapse = ({ collapsed, children }) => {
  const [isCollapsed, setIsCollapsed] = React.useState(collapsed);

  return (
    <>
      <button
        className="collapse-button"
        onClick={() => setIsCollapsed(!isCollapsed)}
      >
        {isCollapsed ? "Показать" : "Скрыть"} содержимое
      </button>
      <div
        className={`collapse-content ${isCollapsed ? "collapsed" : "expanded"}`}
        aria-expanded={isCollapsed}
      >
        {children}
      </div>
    </>
  );
};

Для использования этого компонента просто вызовите его с содержимым, которое вы хотите свернуть:

ReactDOM.createRoot(document.getElementById("root")).render(
  <Collapse>
    <h1>Это свертывание</h1>
    <p>Привет, мир!</p>
  </Collapse>
);

Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по свертываемому содержимому. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.