Блог

Главная - Вопросы по программированию - Скрыть динамический элемент, зависящий от условия

Скрыть динамический элемент, зависящий от условия

#reactjs #react-hooks

#reactjs #реагирующие хуки

Вопрос:

Я хочу создать что-то похожее на аккордеон: https://codesandbox.io/s/suspicious-golick-xrvt5?file=/src/App.js

 import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const items = [
    {
      title: "lorem1",
      content: "content1"
    },
    {
      title: "lorem2",
      content: "content2"
    }
  ];
  const [hide, setHide] = useState({
    title: "",
    open: false
  });

  const hideContent = (title) => {
    setHide({
      title: title,
      open: !hide.open
    });
  };
  return (
    <div className="App">
      {items.map((i) => {
        return (
          <div>
            <h1 onClick={() => hideContent(i.title)}>{i.title}</h1>
            {hide.title === i.title amp;amp; hide.open ? <p>{i.content}</p> : ""}
          </div>
        );
      })}
    </div>
  );
}

Теперь, когда я нажимаю на заголовок, появляется его содержимое, но при нажатии на другой заголовок первое содержимое исчезает, но фактический щелчок не появляется. Как щелкнуть по второму заголовку и скрыть предыдущее содержимое и в то же время открыть фактическое содержимое выбранного элемента?

Комментарии:

1. Вам нужно удалить hide.open для открытия содержимого щелчка, т.е. {hide.title === i.title ? <p>{i.content}</p> : ""}

2. @ShubhamVerma, но таким образом я не могу закрыть все элементы

3. @ShubhamVerma, ты знаешь другое решение?

4. да обновлено в ответе

Ответ №1:

Я думаю, вместо того, чтобы идти с open состоянием. Продолжайте id . Вы состояние элемента

  const items = [
    {
      id: 0,
      title: "lorem1",
      content: "content1"
    },
    {
      id: 1,
      title: "lorem2",
      content: "content2"
    }
  ];

Передать идентификатор в hideContent :

 const hideContent = (title, id) => {
    setHide(
      (prev) =>
         ({
          title: title,
          open: prev.open === id ? null : id
        })
    );
  }

и условие для проверки внутри return следующим образом:

 hide.title === i.title amp;amp; hide.open === i.id ? (
              <p>{i.content}</p>
            ) : (
              ""
            )}

вот демонстрационный и полный код: https://codesandbox.io/s/upbeat-brattain-8yfx7?file=/src/App.js

Метки: