Как в Реакте красиво модифицировать поведение одного компонента?

Question

[Роман Якимчук]

Друзья,

Вопрос на миллион. Я новичок в Реакте, пока не могу найти ответ.

Есть задача, например, повесить на ссылку условия и модификаторы. Скажем, должна быть доступна только при условии №1, синяя при условии №2, должна при клике вызывать какую-то валидацию, должна при клике отправлять данные в статистику.

Решить нужно без копирования кода и привязки к стилю в исходнике или шаблоне, эти кейсы должны быть кастомизируемые под каждый линк.

С JSX я бы написал так (криво, не решение):

<a class={ (blue ? 'blue' : '') + ' ' + (disabled ? 'disabled' : '')} onClick = {validate() && send() }>Ссылка</a>

Я хочу сделать так, чтобы переиспользовать:

<a blue={false} disabled={false} send-stat-on-click validate-on-click>Ссылка</a>

В ангуляре и Vue есть директивы, там всё красиво, а с реактом выходит какое-то месиво из компонентов и инлайн-логики. Не верю что всё так плохо у реакта.

Как вообще вы решаете такие задачи?

Answer 1

[Alexander Dozmorov]

Просто создаётся компонент ссылки, в него прокидываются нужные пропсы (disabled, onClick и прочие). Ну и в самом компоненте их используешь.

Comments

[Роман Якимчук]

Так это будет миллион компонентов. Это одна из типичных ошибок композиции поведения объектов, описанная Робертом Мартином, и на иногда решается через мост. В случае нашей области, у нас есть директивы (обычно).

Вопрос в том, что имеет Реакт, иначе это адский ад, делать столько компонентов.

Выглядит так, что кроме как делать композицию поведения вручную (через библиотеки, например), и потом под этот новый класс делать отдельный компонент, вариантов нет.

[Alexander Dozmorov]

Чаво? Какие миллион компонентов? Речь идёт про компонент ссылки. Ты его один раз создаёшь, а потом просто переиспользуешь.