动态class不支持三目运算符、ES6的模板字符串形式

[jiongrui]

问题描述

动态class不支持三目运算符、ES6的模板字符串形式

复现步骤

<View className={`stock-item ${borderT ? 'border-t' : ''}`}>
// 或者
<View className={borderT ? 'stock-item border-t' : 'stock-item'}>

期望行为

正常支持

报错信息

1、三目运算符报错
[ERRO] /Users/cai/Documents/codes/lookboard/dist/quickapp/src/components/stock-item ERROR: 组件 div 不支持属性 stock-item，支持的属性有 [id, style, class, disabled, if, elif, else, for, tid, show, aria-label, aria-unfocusable] @1:39
[ERRO] /Users/cai/Documents/codes/lookboard/dist/quickapp/src/components/stock-item ERROR: 组件 div 不支持属性 border-t'，支持的属性有 [id, style, class, disabled, if, elif, else, for, tid, show, aria-label, aria-unfocusable] @1:39
[ERRO] /Users/cai/Documents/codes/lookboard/dist/quickapp/src/components/stock-item ERROR: 组件 div 不支持属性 'stock-item'}}'，支持的属性有 [id, style, class, disabled, if, elif, else, for, tid, show, aria-label, aria-unfocusable] @1:39

2、ES6的模板字符串形式报错：
[ERRO] /Users/cai/Documents/codes/lookboard/dist/quickapp/src/components/stock-item ERROR: 组件 div 不支持属性 stock-item，支持的属性有 [id, style, class, disabled, if, elif, else, for, tid, show, aria-label, aria-unfocusable] @1:39
[ERRO] /Users/cai/Documents/codes/lookboard/dist/quickapp/src/components/stock-item ERROR: 组件 div 不支持属性 '，支持的属性有 [id, style, class, disabled, if, elif, else, for, tid, show, aria-label, aria-unfocusable] @1:39
[ERRO] /Users/cai/Documents/codes/lookboard/dist/quickapp/src/components/stock-item ERROR: 组件 div 不支持属性 +，支持的属性有 [id, style, class, disabled, if, elif, else, for, tid, show, aria-label, aria-unfocusable] @1:39
[ERRO] /Users/cai/Documents/codes/lookboard/dist/quickapp/src/components/stock-item ERROR: 组件 div 不支持属性 (border_t，支持的属性有 [id, style, class, disabled, if, elif, else, for, tid, show, aria-label, aria-unfocusable] @1:39
[ERRO] /Users/cai/Documents/codes/lookboard/dist/quickapp/src/components/stock-item ERROR: 组件 div 不支持属性 ?，支持的属性有 [id, style, class, disabled, if, elif, else, for, tid, show, aria-label, aria-unfocusable] @1:39

系统信息

Taro v2.0.4

Taro CLI 2.0.4 environment info:
System:
OS: macOS 10.14.6
Shell: 3.2.57 - /bin/sh
Binaries:
Node: 13.1.0 - ~/.nvm/versions/node/v13.1.0/bin/node
Yarn: 1.19.1 - ~/.yarn/bin/yarn
npm: 6.12.1 - ~/.nvm/versions/node/v13.1.0/bin/npm
npmPackages:
@tarojs/components: 2.0.4 => 2.0.4
@tarojs/components-qa: 2.0.4 => 2.0.4
@tarojs/mini-runner: 2.0.4 => 2.0.4
@tarojs/router: 2.0.4 => 2.0.4
@tarojs/taro: 2.0.4 => 2.0.4
@tarojs/taro-alipay: 2.0.4 => 2.0.4
@tarojs/taro-h5: 2.0.4 => 2.0.4
@tarojs/taro-qq: 2.0.4 => 2.0.4
@tarojs/taro-quickapp: 2.0.4 => 2.0.4
@tarojs/taro-rn: 2.0.4 => 2.0.4
@tarojs/taro-swan: 2.0.4 => 2.0.4
@tarojs/taro-tt: 2.0.4 => 2.0.4
@tarojs/taro-weapp: 2.0.4 => 2.0.4
@tarojs/webpack-runner: 2.0.4 => 2.0.4
eslint-config-taro: 2.0.4 => 2.0.4
eslint-plugin-taro: 2.0.4 => 2.0.4
nerv-devtools: ^1.5.6 => 1.5.6
nervjs: ^1.5.6 => 1.5.6
stylelint-config-taro-rn: 2.0.4 => 2.0.4
stylelint-taro-rn: 2.0.4 => 2.0.4
npmGlobalPackages:
typescript: 3.7.5

补充信息

页面调试生成的dom，可能是模板解析有问题：
1、<div ref="99" (border_t="" '="" +="" ?="" class="{{" 'borderT'="" '')}}'="" stockItem="">

2、<div ref="99" class="{{ border_t ?" stockItem="" 'stockItem'}}'="" borderT'="">

可用函数替代方案：

getClassName() {
  return this.props.borderT ? 'stock-item border-t' : 'stock-item'
}
render() {
  return <View className={this.getClassName()}>

如果您有功能上的建议，可以提到 FeatHub

使用上的问题，欢迎在「Taro 社区」一起交流

[taro-bot]

CC @luckyadam

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[luckyadam]

暂时用你提到的替代方案来写吧，class 最好不要直接传表达式，可以写成变量再传进去

[jiongrui]

好的

[jayden320]

建议编译器在转ux文件时，将单引号转成双引号。这样就能比较优雅的解决这个问题了。
class='{{xxxxx}}'
改成
class="{{xxxxx}}"

[yechunxi]

建议编译器在转ux文件时，原先在1.3.29的版本中，组件是双引用，页面是单引号，希望都能够统一class="{{xxxxx}}"会比较方便，特别是在一个循环列表里，有多个class控制的时候，用函数就很麻烦了