What does the analogue of the angularjs directive look like in reactjs?

Question

Angular

I recently started studying React and I want to figure out how the tasks that I solved before in Angular are now solved in the functional paradigm of React.
I have always had directives in my projects that set the behavior of elements and solve everyday tasks. For example, an input mask that works only with the input value and does not allow you to enter anything other than numbers, or a directive that sets the width of the parent container to the element. Such directives can simply be "attached" to your controls and they will work. This is cool because you can describe the logic of behavior without bothering with the external implementation.
But there are no directives in react. There are only elements and components. How to create a container in React that sets the behavior of the control without prescribing its appearance in it? Or am I eating the sandwich on the wrong side?)

Answer 1

Higher order components. You can wrap one component with another, you can pass components as props. Directives are very similar to components, or vice versa, only in react, speaking in the angular language, everything from directives) www.w3ii.com/ru/reactjs/reactjs_higher_order_compo
...
https://habrahabr.ru/post/309422/prgssr.ru/
development/komponenty-vysshego-poryadka.html
For example,

const dog = () => ( <Dog /> );
const robotDog = () = > ( <RobotDog dog={ dog } /> );

return (
    <MurderRobotDog dog={ robotDog } />
);

or

<MurderRobotDog />
     <RobotDog >
         <Dog />
     </ RobotDog >
</ MurderRobotDog>