Задать вопрос
@0x80070005

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

Имеется вот такой список как пример, это телеграмм.
67300c5c4e9fa606027977.jpeg
Тут имеются секции и все они разные. Где-то просто текст, где-то чекбоксы, где-то dropdown ну и т.д. Как написать данный компонент, который можно будет использовать таким образом? Не буду же в один компонент передавать пропсы, чтобы скрыть какие-либо элементы, считаю это полный бред. В голове крутится только один вариант: создавать для каждой секции компонент, но мне кажется что и этот вариант вообще неверный.Честно говоря, хотелось-бы наглядный пример как такое написать :)
  • Вопрос задан
  • 95 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 2
@karminski
Senior React.JS Developer
У вас будет 3 компонента, секция, чекбокс и дропдаун. Последние 2 в зависимости от вида списка вы передаете в качестве детей в секцию. Например
<Section>
   <Checkbox>Тут подпись к чекбоксу</Checkbox>
   <Dropdown>Тут наверно опции к дропдауну</Dropdown>
</Section>
Ответ написан
alsolovyev
@alsolovyev
¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
Скорее всего вам будет полезно узнать о Compound components. Что-то такое:
<List>
  <List.Item>
     <List.Checkbox ...> Some text
  </List.Item>
  <List.Item>
     Some text <List.Checkbox ...> 
  </List.Item>
  <List.Item>
     <List.Dropdown ...>
  </List.Item>
</List>

Вот реальный пример из chakra ui:
import { List } from "@chakra-ui/react"
import { LuCheckCircle, LuCircleDashed } from "react-icons/lu"

const Demo = () => {
  return (
    <List.Root gap="2" variant="plain" align="center">
      <List.Item>
        <List.Indicator asChild color="green.500">
          <LuCheckCircle />
        </List.Indicator>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit
      </List.Item>
      <List.Item>
        <List.Indicator asChild color="green.500">
          <LuCheckCircle />
        </List.Indicator>
        Assumenda, quia temporibus eveniet a libero incidunt suscipit
      </List.Item>
      <List.Item>
        <List.Indicator asChild color="green.500">
          <LuCircleDashed />
        </List.Indicator>
        Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
      </List.Item>
    </List.Root>
  )
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
11 дек. 2024, в 12:25
60000 руб./за проект
11 дек. 2024, в 12:21
2000 руб./в час
11 дек. 2024, в 12:02
5000 руб./за проект