Size: a a a

2020 February 25

VH

Vitaly Harisov in БЭМ
Роман
Делаю по инструкции ( https://github.com/bem/bem-react/tree/master/packages/core#step-4 ), всё получается, нравится. Но захотелось, чтобы кнопка по умолчанию была type=button, как в bem-components (а не type=submit, как по спеке). Сделал composeU(withButtonTypeSubmit, withButtonTypeLink). Соответсвенно, в базовый шаблон кнопки я добавил это как пропс:

// step 2

export const Button: FC<IButtonProps> = ({
 children,
 className,
 as: Component = 'button',
 type = 'button'
 ...props
}) => (
 <Component {...props} type={type} className={cnButton({}, [className])}>
   {children}
 </Component>
)


Но теперь у Button_type_link тоже в обязательном порядке появился атрибут type=link, а вот это уже нежелательно. Как сделать красиво, чтобы «избавиться» от этого пропса в Button_type_link ?
Для _type_link не передавать этот prop или игнорировать его и не выводить в DOM.
источник

VH

Vitaly Harisov in БЭМ
Ваш КО
источник

Р

Роман in БЭМ
Запутался в дженериках 😣
источник

Р

Роман in БЭМ
Vitaly Harisov
Для _type_link не передавать этот prop или игнорировать его и не выводить в DOM.
источник

S🌍

Sv 🌍 in БЭМ
источник

EW

Eugeniy World in БЭМ
Роман
Делаю по инструкции ( https://github.com/bem/bem-react/tree/master/packages/core#step-4 ), всё получается, нравится. Но захотелось, чтобы кнопка по умолчанию была type=button, как в bem-components (а не type=submit, как по спеке). Сделал composeU(withButtonTypeSubmit, withButtonTypeLink). Соответсвенно, в базовый шаблон кнопки я добавил это как пропс:

// step 2

export const Button: FC<IButtonProps> = ({
 children,
 className,
 as: Component = 'button',
 type = 'button'
 ...props
}) => (
 <Component {...props} type={type} className={cnButton({}, [className])}>
   {children}
 </Component>
)


Но теперь у Button_type_link тоже в обязательном порядке появился атрибут type=link, а вот это уже нежелательно. Как сделать красиво, чтобы «избавиться» от этого пропса в Button_type_link ?
Есть ишью про это — https://github.com/bem/bem-react/issues/381
источник

EW

Eugeniy World in БЭМ
Вообще с линкой можно немного другим способом пойти, мы так делаем к примеру
источник

EW

Eugeniy World in БЭМ
<Button as={Link} />
источник

EW

Eugeniy World in БЭМ
Часть компонентов реализует интерфейс as т.е. вместо кнопки можно отрендерить другой компонент с тем же функционалом
источник

AY

Alexey Yarrr (qfox) in БЭМ
Eugeniy World
<Button as={Link} />
as={Div}
источник

EW

Eugeniy World in БЭМ
В итоге не дублируем логику в ссылке и в _type_link про всякие rel и тд а используем уже имеющийся компонент
источник

EW

Eugeniy World in БЭМ
к тому же есть на проекте есть react-router, то можно использовать ссылку оттуда
источник

EW

Eugeniy World in БЭМ
<Link as={ReactRouterLink} />
<Button as={ReactRouterLink} />
источник

Р

Роман in БЭМ
Eugeniy World
<Button as={Link} />
Ух! Звучит здраво, спасибо!
источник
2020 February 27

1

17782006626 in БЭМ
How are you getting along with...?
источник

V

Valentin in БЭМ
А вы не пробовали SvelteJS? Как в нем можно реализовать модификаторы как отдельные компоненты?
источник

EW

Eugeniy World in БЭМ
Не-а :) но если кто-то делал, я бы посмотрел на реализацию
источник
2020 February 28

ПЗ

Павел Зубков in БЭМ
Куда вы убираете перфекционизм на работе?
источник

EW

Eugeniy World in БЭМ
В беклог :)
источник

SB

Sergey Belozyorcev in БЭМ
Eugeniy World
В беклог :)
:)
источник