How to beautifully modify the behavior of one component in React?

Question

JavaScript

Friends,
the question in a million. I'm new to React, can't find an answer yet.
There is a task, for example, to hang conditions and modifiers on the link. For example, it should be available only under condition No. 1, blue under condition No. 2, should cause some kind of validation when clicked, should send data to statistics when clicked.
You need to decide without copying the code and linking to the style in the source code or template, these cases should be customizable for each link.
With JSX, I would write like this (crooked, not a solution):

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

What I want to do is to reuse:

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

Angular and Vue have directives, everything is beautiful there, but with react, some kind of mess comes out of components and inline logic. I do not believe that everything is so bad in React.
How do you generally solve such problems?

Answer 1

The link component is simply created, the necessary props are thrown into it (disabled, onClick, and others). Well, in the component itself you use them.