Я использую компоненты MUI и добавляю разделитель после каждой категории. Есть ли способ исключить разделитель после последней категории?
Вот мой код; (разделитель находится прямо внизу перед тегом.
export const MenuItemGroup = ({ label, items, menuVariant, onItemClick }: MenuItemGroupProps) => {
return (
<Box>
<>
{label !== undefined && label !== null ? (
<Box sx = {{ margin: '16px', marginBottom: '8px' }}>
<Typography variant = "body2medium" sx = {{ color: 'var(--sds-ref-color-base-black70)' }}>
{label}
</Typography>
</Box>
) : (
<></>
)}
</>
<>
{items &&
items.map((item, itemIndex) => {
return <MenuItem key = {itemIndex} item = {item} menuVariant = {menuVariant} onItemClick = {onItemClick} />;
})}
</>
</Box>
);
};
const MenuGroupSection = ({ label, groups, menuVariant, onItemClick }: MenuGroupSectionProps) => {
return (
<Stack direction = "column" sx = {{ display: 'flex', width: '100%' }}>
{label !== undefined && label !== null ? (
<>
<Box sx = {{ margin: '16px', marginBottom: '8px' }}>
<Typography variant = "body2semibold" sx = {{ color: '#000000' }}>
{label}
</Typography>
</Box>
</>
) : (
<></>
)}
<Stack direction = "row" sx = {{flexWrap: 'wrap', display:'grid' , gridTemplateColumns : 'auto auto' }}>
{groups &&
groups.map((group, index) => {
return (
<MenuItemGroup
key = {index}
label = {group.label}
items = {group.items as MenuItemNode[]}
onItemClick = {onItemClick}
menuVariant = {menuVariant}
></MenuItemGroup>
);
})}
</Stack>
<Divider sx = {{ marginLeft: '16px', marginRight: '16px' }} />
</Stack>
);
};
Один из способов сделать это — передать компоненту MenuGroupSection реквизит, указывающий, что он последний:
const MenuGroupSection = ({ label, groups, menuVariant, onItemClick, isLast }: MenuGroupSectionProps) => {
А затем визуализируйте разделитель, только если он не последний:
{!isLast ? <Divider sx = {{ marginLeft: '16px', marginRight: '16px' }} /> : null}
Это сработает для вас?
Я согласен, хотя
isDivided
илиdivider
— более связное имя переменной, если этому компоненту не нужно знать, что это элемент в списке,