Селекторы
Синтаксис селекторов построен на основе css-селекторов. Поддерживаемые типы селекторов:
Селекторы
Компонент или DOM-элемент
Input
- найдет react-компонент с соответствующим именем.div
- найдет DOM-элемент
Поиск компонентов осуществляется по displayName
компонента.
Компонент с HOC-ами
Компонент может быть завернуть в один или несколько HOC-ов. Если использовать общепринятое именование завернутых в HOC компонентов, например
withHocB(Input)
и withHocA(withHocB(Input))
, то можно использовать такое селекторы:
withHocB(Input)
- найдет элемент с точным именемwithHocB(**(Input))
- найдет элемент, которому последним применили HOC withHocB. Подойдут:withHocB(Input)
,withHocB(withHocA(Input))
,withHocB(withHocC(withHocA(Input)))
. Не подойдут withHocA(withHocB(withHocC(withHocA(Input))))**(withHocB(Input))
- найдет элемент, которому первым применили HOC withHocB.**(withHocB(**(Input)))
- найдет элемент, которому применили HOC withHocB не зависимо от порядка.
Селектор по атрибуту или props-у
Выбирает элемент по значению атрибута. Например
[value=test]
- найдёт компонент или DOM-элемент, у которого есть props или атрибут value и он равенtest
.
Поддерживаются такие операторы:
[value]
- проверка начилия props-а или атрибута=
- строго равенство~=
- строгое вхождение в список. Атрибут может быть или массивом, или строкой -- тогда список строится путём разбиения по пробелу.^=
- атриубут начинается с заданной строки$=
- атриубут окачивается заданной строкой*=
- атриубут содержит заданну строку
Комбинаторы
Селекторы можно комбинировать:
And
- Input[value='test'][error] - Найдёт компонент
Input
, у которогоvalue
строго равноtest
и есть свойствоerror
.
Nesting
- Input input - Найдёт dom-элемент
input
вложенный на любом уровне в компонентInput
.