使用短路语法去返回一个组件或者 JSX 会产生错误

[lkangd]

相关平台

微信小程序

小程序基础库: 2.16.0 使用框架: React

复现步骤

使用短路语法返回一段 JSX 或者组件，

  try {
    const c = () => tplModuleId === MODULES.MODULE_CITY_BANNER && <View>render</View>
    console.log('c 123:>> ', c)
  } catch (e) {
    console.log('e 123:>> ', e)
  }

编译完使用的时候，会产生两个错误， 1.返回组件 c 会报不存在，直接原因为实际打包产物没有被打包进去：

ReferenceError: c is not defined
    at IndexModule._createData (index.js? [sm]:94)
    at doUpdate (taro.js? [sm]:2914)
    at mountComponent (taro.js? [sm]:2872)
    at qi.initComponent (taro.js? [sm]:2590)
    at qi.observer (taro.js? [sm]:2278)
    at Function.i.safeCallback (VM1406 WAService.js:2)
    at a.<anonymous> (VM1406 WAService.js:2)
    at u.doUpdates (VM1406 WAService.js:2)
    at qn (VM1406 WAService.js:2)
    at or (VM1406 WAService.js:2)

2.开发者工具报错：

TypeError: Cannot assign to read only property 'Symbol(Symbol.toStringTag)' of object '#<Object>'
    at getRawTag (taro.js? [sm]:1720)
    at baseGetTag (taro.js? [sm]:1774)
    at isPlainObject (taro.js? [sm]:1876)
    at isEmptyObject (taro.js? [sm]:1893)
    at taro.js? [sm]:2933
    at Array.forEach (<anonymous>)
    at doUpdate (taro.js? [sm]:2925)
    at mountComponent (taro.js? [sm]:2872)
    at qi.initComponent (taro.js? [sm]:2590)
    at qi.observer (taro.js? [sm]:2278)(env: macOS,mp,1.05.2105170; lib: 2.16.0)

期望结果

使用短路语法或者三目运算符去动态返回一个组件可以正常渲染。

实际结果

使用短路语法或者三目运算符动态返回的组件没有被打包进最终的产物中，且开发者工具运行报错。

环境信息

Taro CLI 2.2.17 environment info:
    System:
      OS: macOS 11.4
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 12.20.1 - /var/folders/5c/j9wym1hj535_bqzylw30s6_r0000gn/T/yarn--1624001450239-0.6207116566714468/node
      Yarn: 1.22.10 - /var/folders/5c/j9wym1hj535_bqzylw30s6_r0000gn/T/yarn--1624001450239-0.6207116566714468/yarn
      npm: 6.14.10 - ~/.nvm/versions/node/v12.20.1/bin/npm
    npmPackages:
      @tarojs/cli: 2.2.17 => 2.2.17 
      @tarojs/components: 2.2.17 => 2.2.17 
      @tarojs/components-rn: 2.2.17 => 2.2.17 
      @tarojs/mini-runner: 2.2.17 => 2.2.17 
      @tarojs/plugin-babel: 2.2.17 => 2.2.17 
      @tarojs/plugin-csso: 2.2.17 => 2.2.17 
      @tarojs/plugin-less: ^2.2.10 => 2.2.10 
      @tarojs/plugin-stylus: 2.2.17 => 2.2.17 
      @tarojs/plugin-terser: ^2.2.10 => 2.2.10 
      @tarojs/redux: 2.2.17 => 2.2.17 
      @tarojs/redux-h5: 2.2.17 => 2.2.17 
      @tarojs/router: 2.2.17 => 2.2.17 
      @tarojs/taro: 2.2.17 => 2.2.17 
      @tarojs/taro-alipay: 2.2.17 => 2.2.17 
      @tarojs/taro-h5: 2.2.17 => 2.2.17 
      @tarojs/taro-redux-rn: 2.2.17 => 2.2.17 
      @tarojs/taro-rn: 2.2.17 => 2.2.17 
      @tarojs/taro-router-rn: 2.2.17 => 2.2.17 
      @tarojs/taro-swan: 2.2.17 => 2.2.17 
      @tarojs/taro-tt: 2.2.17 => 2.2.17 
      @tarojs/taro-weapp: 2.2.17 => 2.2.17 
      @tarojs/webpack-runner: 2.2.17 => 2.2.17 
      eslint-config-taro: 2.2.17 => 2.2.17 
      eslint-plugin-taro: 2.2.17 => 2.2.17 
      nerv-devtools: ^1.5.7 => 1.5.7 
      nervjs: ^1.5.7 => 1.5.7 
      react: ^16.12.0 => 16.12.0 
      react-native: 0.59.9 => 0.59.9 
      stylelint-config-taro-rn: 2.2.17 => 2.2.17 
      stylelint-taro-rn: 2.2.17 => 2.2.17 

[luckyadam]

Taro 2 不支持这么写，要使用的话可以试一下 Taro 3

[lkangd]

Taro 2 不支持这么写，要使用的话可以试一下 Taro 3

但是降级到 2.2.13 没有这个问题的出现，所以这是专门设计成这样的嘛？ 意思是后续的 2 版本的更新也不会修复这个问题？ 目前并没有升级 3 的计划，升级成本太高了，当前的业务节奏不允许。