JSX对象编译问题

[yangtao00]

问题描述

上次提过这个 issue，根据建议我把 taro 相关的进行了升级（1.3.25版本），但是问题依然存在，以下是相关的信息

复现步骤

1. 在jsx代码块内下写入一下代码，并运行

<View>
{
   {
     a: <View>a</View>,
     b: <View>b</View>,
   }['a']
}
</View>

期望行为

能正常编译渲染

报错信息

控制台报错 ReferenceError: a is not defined

系统信息

Taro CLI 1.3.25 environment info:
System:
OS: macOS 10.15.1
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 11.10.1 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.7.0 - /usr/local/bin/npm
npmPackages:
@tarojs/async-await: 1.3.25 => 1.3.25
@tarojs/cli: 1.3.25 => 1.3.25
@tarojs/components: 1.3.25 => 1.3.25
@tarojs/components-rn: 1.3.25 => 1.3.25
@tarojs/mobx: 1.3.25 => 1.3.25
@tarojs/mobx-h5: 1.3.25 => 1.3.25
@tarojs/mobx-rn: 1.3.25 => 1.3.25
@tarojs/plugin-babel: 1.3.25 => 1.3.25
@tarojs/plugin-csso: 1.3.25 => 1.3.25
@tarojs/plugin-sass: 1.3.25 => 1.3.25
@tarojs/plugin-uglifyjs: 1.3.25 => 1.3.25
@tarojs/rn-runner: 1.3.25 => 1.3.25
@tarojs/router: 1.3.25 => 1.3.25
@tarojs/taro: 1.3.25 => 1.3.25
@tarojs/taro-alipay: 1.3.25 => 1.3.25
@tarojs/taro-h5: 1.3.25 => 1.3.25
@tarojs/taro-redux-rn: 1.3.25 => 1.3.25
@tarojs/taro-rn: 1.3.25 => 1.3.25
@tarojs/taro-router-rn: 1.3.25 => 1.3.25
@tarojs/taro-swan: 1.3.25 => 1.3.25
@tarojs/taro-tt: 1.3.25 => 1.3.25
@tarojs/taro-weapp: 1.3.25 => 1.3.25
@tarojs/webpack-runner: 1.3.25 => 1.3.25
eslint-config-taro: 1.3.25 => 1.3.25
eslint-plugin-taro: 1.3.25 => 1.3.25
nerv-devtools: ^1.4.0 => 1.5.6
nervjs: ^1.4.0 => 1.5.6
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4
stylelint-config-taro-rn: 1.3.0 => 1.3.0
stylelint-taro-rn: 1.3.0 => 1.3.0
npmGlobalPackages:
typescript: 3.6.3

补充信息

同时我也执行了taro doctor，信息如下：
✔ 诊断完成

检查 Taro 配置 (/Users/mac/Desktop/xx/xx/config/index.js)
[✗] rn 不合法的字段

检查依赖
[!] 检测到最新稳定版本 Taro 1.3.26 , 当前 cli 版本 1.3.25
前往 https://github.com/NervJS/taro/releases 了解详情

检查推荐内容
[✓] 没有发现问题

把这块代码放到 React下面，则可以正常运行渲染

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

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

[taro-bot]

CC @luckyadam

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[shenghanqin]

@yangtao00 说实话，这是我第一次看到jsx里面有这种写法的，能给一下写法的依据吗？
在我理解，不是应该用三元运算符或者短路写法来写吗？

[yangtao00]

@shenghanqin

这是团队其他同事写出来的，其实也是我第一次见这种写法，一般我都会通过其他方式代替。 项目之前没有启用eslint，最近我添加了eslint之后，对项目做了一个整体的fix后，出现了这样的错误，我在排错的过程中看到的这样的代码，这块的原代码是:

</View>
{
   {
    'a': <View>a</View>,
     'b': <View>b</View>,
   }['a']
}
</View>

被fix成了下面这样:

</View>
{
   {
     a: <View>a</View>,
     b: <View>b</View>,
   }['a']
}
</View>

而且这样的代码并不是只有一处，于是我就想是不是根本不支持这样的写法，但是我把同样的代码放到react中，是可以编译并渲染成功的。

[Garfield550]

对象的 key { 'a', 'b' } 等效于 { a, b }。

然后 Taro 不是完全支持 React 的非常见写法的，还请你们同事看一下 Taro 文档里的编码规范。
Taro 和 React 有很多不一样的地方，虽然可以尽可能做的行为一致，但是因为跨端的原因，还是必须有些取舍和严苛。

[taro-bot]

CC @yuche

[shenghanqin]

其实，Taro编译不仅要照顾到React常见写法，还要完成小程序侧的data适配，所以，我选择尽量使用常见写法来编码，这样不仅团队维护简单，bug还是会少的。 @yangtao00

[yangtao00]

@Garfield550

对象的 key { 'a', 'b' } 等效于 { a, b }。

然后 Taro 不是完全支持 React 的非常见写法的，还请你们同事看一下 Taro 文档里的编码规范。
Taro 和 React 有很多不一样的地方，虽然可以尽可能做的行为一致，但是因为跨端的原因，还是必须有些取舍和严苛。

就是因为对象的 key { 'a', 'b' } 等效于 { a, b }，我才来提这个 issue 的。taro不支持这种写法怎么跟跨端的原因联系上呢

[yangtao00]

@shenghanqin

其实，Taro编译不仅要照顾到React常见写法，还要完成小程序侧的data适配，所以，我选择尽量使用常见写法来编码，这样不仅团队维护简单，bug还是会少的。 @yangtao00

如果是一两处这样的写法，可能我就把它手动处理了，现在的情况是，这样的代码不算少，但我们又想做全局的eslint fix，因此想依最小化的改动，来完成eslint fix

[Garfield550]

@Garfield550

对象的 key { 'a', 'b' } 等效于 { a, b }。
然后 Taro 不是完全支持 React 的非常见写法的，还请你们同事看一下 Taro 文档里的编码规范。
Taro 和 React 有很多不一样的地方，虽然可以尽可能做的行为一致，但是因为跨端的原因，还是必须有些取舍和严苛。

就是因为对象的 key { 'a', 'b' } 等效于 { a, b }，我才来提这个 issue 的。taro不支持这种写法怎么跟跨端的原因联系上呢

因为实际上，Taro 这边的代码虽然是 React 写法，但是完全不依赖 React 的编译器，而是通过 Babel 转换成 AST，再编译成各端代码的，在 AST 到编译后代码这个过程，如果有些 Case 不能很方便的分析并转译（编译）的话，就会出现结果错误或者编译失败等问题。

[Chen-jj]

Taro3 应该没有这个问题了。