Как выглядит аналог angularjs-директивы в reactjs?

Question

[Владимир Т.]

Недавно начал изучать реакт и хочу разобраться как задачи, которые я решал прежде в ангуляре теперь решать в функциональной парадигме реакта.
У меня в проектах всегда были директивы задающие поведение элементов и решающие бытовые задачи. Например маска ввода, которая работает только со значением инпута и не даёт вводить ничего кроме цифр или директива, которая задаёт элементу ширину родительского контейнера. Такие директивы можно просто "прикреплять" к своим контролам и они будут работать. Это круто потому, что можно описывать логику поведения не заморачиваясь над внешней реализацией.
Но в реакте директив нет. Есть только элементы и компоненты. Как в реакте создать контейнер задающий поведение контролу не прописывая в нём его внешний вид? Или я неправильной стороной бутерброд ем?)

Answer 1

[Frozen Coder]

Компоненты высшего порядка. Можно оборачивать одним компонентом другой, можно передавать компоненты как props. Директивы очень похожи на компоненты или наоборот, только в react, говоря ангуляр-языком всё из директив)
www.w3ii.com/ru/reactjs/reactjs_higher_order_compo...
https://habrahabr.ru/post/309422/
prgssr.ru/development/komponenty-vysshego-poryadka.html

Например,

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

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

либо

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

Comments

[Владимир Т.]

Пытаюсь понять верно ли я понимаю. Например у меня есть компонент Dog, которому понадобилось задать поведение Murder и Robot, ангуляр-версия будет такой: . Если понадобится добавить другое поведение, то я могу описать его в директиве и просто дописать его в шаблон: . Верно ли, что в случае с реактом понадобится делать композицию из нужных компонентов?

[Владимир Т.]

Блин, тостер обрезал код. Набросал гист с примером https://gist.github.com/catindev/7a494582adeed1d8a...

[Frozen Coder]

Владимир Т.: добавил пример в ответ. На деле всё зависит от того, как будут связаны компоненты и что будет делаться в компонентах высшего порядка. Сам перехожу с angular, понимаю, что непривычно и писать теперь надо на простые в ангуляр вещи кода больше)