Как добавить атрибут стиля, содержащий более одного слова в pugjs
Я пытаюсь добавить атрибуты стиля с использованием pugsj и не могу понять, как добавить такой стиль, как line-height, без жалоб моих линтеров.
У меня есть этот шаблон мопса (не работает)
Div(
class = "CoolAid"
style = {line-height:'40px', background-color: 'red'}
)
= childrenArray[0]
Обратите внимание, что eslint все еще жалуется, когда я использую "background-color": 'red'.
yarn lint:es
yarn run v1.6.0
$ eslint ./config ./src
Cannot read property 'split' of undefined
TypeError: Cannot read property 'split' of undefined
at TaggedTemplateExpression (/home/circleci/github/node_modules/eslint-plugin-
react-pug/lib/rules/no-broken-template.js:33:38)
at listeners.(anonymous function).forEach.listener (/home/circleci/github/node_modules/eslint/lib/util/safe-emitter.js:47:58)
at Array.forEach (<anonymous>)
at Object.emit (/home/circleci/github/node_modules/eslint/lib/util/safe-emitter.js:47:38)
at NodeEventGenerator.applySelector (/home/circleci/github/node_modules/eslint/lib/util/node-event-generator.js:251:26)
at NodeEventGenerator.applySelectors (/home/circleci/github/node_modules/eslint/lib/util/node-event-generator.js:280:22)
at NodeEventGenerator.enterNode (/home/circleci/github/node_modules/eslint/lib/util/node-event-generator.js:294:14)
at CodePathAnalyzer.enterNode (/home/circleci/github/node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:608:23)
at Traverser.enter [as _enter] (/home/circleci/github/node_modules/eslint/lib/linter.js:865:28)
at Traverser._traverse (/home/circleci/github/node_modules/eslint/lib/util/traverser.js:132:14)
error Команда не удалась с кодом выхода 1.
[eslint] Pug can't parse this template (react-pug/no-broken-template)
Это пакеты, связанные с pug / eslint, которые я использую
"eslint-plugin-react": "^7.4.0",
"eslint-plugin-react-pug": "^0.3.0",
"babel-plugin-transform-react-pug": "^5.0.0",
"eslint": "^4.19.1",
он жалуется в обоих случаях (я также пробовал случай верблюда, например ctlineHeight). Также, если это помогает, он не работает локально, когда я делаю yarn lint:es, а также на circleCI
Итак, это: {"line-height":'40px', "background-color": 'red'} по-прежнему выдает ошибки lint ?, и он работает нормально, когда вы полностью удаляете атрибут стиля?
Должно быть, работает style = {"line-height":'40px', "background-color": 'red'} и применяется css. На самом деле проблема в том, что внутри этого объекта больше одного стиля, {"background-color": 'red'} -> css works &no lint errors. {backgroundColor: 'red'} `-> работает и нет ошибок ворса. Документы описывают это pugjs.org/language/attributes.html
Это линтер, который я использую github.com/ezhlobo/eslint-plugin-react-pug
почему бы не использовать style = "line-height: 40px; background-color: red;"?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вот как это сделать:
.CoolAid(style = "{line-height:'40px', background-color: 'red'}")= childrenArray[0]
В результате будет получен следующий тег:
<div class = "CoolAid" style = "{line-height:'40px', background-color: 'red'}">
{{childrenArray[0]}}
</div>
Я заметил, что вы говорите, что он все еще жалуется, когда вы используете "background-color", поэтому я не знаю, говорили ли вы, что знаете, что вам нужно использовать "" или нет ...