JSX и вветвления ― jsx-control-statements
Одна из раздражающих меня в React вещей, это помесь XML и JS синтаксиса. И ладно бы в одном файле, но, блин, даже в одном блоке. Сочетания XML и конструкций вроде {arr.map(arr => { очень сильно бьют, как по читаемости, так и по глазам в целом. К счастью, есть возможность этого избежать, используя jsx-control-statements. Т.к. его внедрение оказалось делом не совсем тривиальным, я решил написать об этому небольшой очерк.
Для начала, что нам даёт этот плагин?
<If condition={anyCondition}>...</If>
// вместо
{anyCondition && ...}
А также
<For each="el" index="key" of={arr}>...</For>
// вместо
{arr.map((el, key) => ...}
Т.е. XML-like конструкции, похожие на соответствующие им из XSLT (только более компактные). Также там есть ещё <Choice/> для switch-ей.
Ok, а как оно работает? Оно городит новые DOM-элементы? Нет. Оно ещё на уровне babel-я трансформируется в те самые && и .map. Т.е. это синтаксический сахар для эстетов. Ok, как подключить?
- npm i jsx-control-statements
- в настройки babel-я в plugins добавляем "jsx-control-statements"
Всё, работает. А как насчёт lint-инга? Оказалось, что тут тоже всё схвачено (для eslint), но нужно немного понастраивать:
- npm i eslint-plugin-jsx-control-statements
- в настройках eslint
- в plugins добавляем jsx-control-statements
- в extends добавляем jsx-control-statements
Теперь никаких неудобств. Проблем с подстветкой синтаксиса тоже никаких (если у вас вообще JSX нормально отображается, конечно).