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

Question

[0x80070005]

Имеется вот такой список как пример, это телеграмм.

Тут имеются секции и все они разные. Где-то просто текст, где-то чекбоксы, где-то dropdown ну и т.д. Как написать данный компонент, который можно будет использовать таким образом? Не буду же в один компонент передавать пропсы, чтобы скрыть какие-либо элементы, считаю это полный бред. В голове крутится только один вариант: создавать для каждой секции компонент, но мне кажется что и этот вариант вообще неверный.Честно говоря, хотелось-бы наглядный пример как такое написать :)

Answer 1

[Антон Иванов]

У вас будет 3 компонента, секция, чекбокс и дропдаун. Последние 2 в зависимости от вида списка вы передаете в качестве детей в секцию. Например

<Section>
   <Checkbox>Тут подпись к чекбоксу</Checkbox>
   <Dropdown>Тут наверно опции к дропдауну</Dropdown>
</Section>

Comments

[0x80070005]

Спасибо

Answer 2

[Aleksey Solovyev]

Скорее всего вам будет полезно узнать о 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>
  )
}

Comments

[0x80070005]

Спасибо! Пошел разбираться)