我正在尝试添加style attributes using pugsj而我无法想象如何添加像line-height
这样的样式而不会让我的短信抱怨。
我有这个哈巴狗模板(不起作用)
Div(
class="CoolAid"
style={line-height:'40px', background-color: 'red'}
)
= childrenArray[0]
请注意,当我使用"background-color": 'red'
时,eslint仍会抱怨。
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)
错误命令失败,退出代码为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",
答案 0 :(得分:0)
这是这样做的方法:
.CoolAid(style="{line-height:'40px', background-color: 'red'}")= childrenArray[0]
这将产生以下标记:
<div class="CoolAid" style="{line-height:'40px', background-color: 'red'}">
{{childrenArray[0]}}
</div>