Render Props无法正常工作

[luosheng]

问题描述

1.3.5 起支持的Render Props无法同时在H5和微信小程序模式下工作。
在1.3.5和1.3.6版本下H5端运行时报错，1.3.7和1.3.8版本下微信小程序端编译报错。

复现步骤

此处直接在taro init出来的项目中添加了文档中的Render Props示例代码 https://nervjs.github.io/taro/docs/render-props.html

import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.css'

class Cat extends Taro.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
    );
  }
}

class Mouse extends Taro.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleClick.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleClick(event) {
    const { x, y }  = event.detail
    this.setState({
      x,
      y
    });
  }

  render() {
    return (
      <View style={{ height: '100%' }} onClick={this.handleClick}>
        {this.props.renderCat(this.state)}
      </View>
    );
  }
}

export default class Index extends Component {

  config = {
    navigationBarTitleText: '首页'
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    return (
      <View className='index'>
        <Mouse renderCat={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </View>
    )
  }
}

期望行为

Render Props应可以正常编译成微信小程序代码，且在H5下不报错。

报错信息

1.3.5及1.3.6下，运行npm run dev:h5，启动后于浏览器打开，控制台报错TypeError: this.props.renderCat is not a function

1.3.7及1.3.8下，运行npm run dev:weapp，终端报错TypeError: Cannot read property 'isCallExpression' of null

系统信息

因为在两个版本下分别进行了测试，故贴出两次的系统信息

👽 Taro v1.3.6

Taro CLI 1.3.6 environment info:
System:
OS: macOS 10.15
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.15.3 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
npmPackages:
@tarojs/cli: 1.3.6 => 1.3.6
@tarojs/components: 1.3.6 => 1.3.6
@tarojs/plugin-babel: 1.3.6 => 1.3.6
@tarojs/plugin-csso: 1.3.6 => 1.3.6
@tarojs/plugin-uglifyjs: 1.3.6 => 1.3.6
@tarojs/router: 1.3.6 => 1.3.6
@tarojs/taro: 1.3.6 => 1.3.6
@tarojs/taro-alipay: 1.3.6 => 1.3.6
@tarojs/taro-h5: 1.3.6 => 1.3.6
@tarojs/taro-swan: 1.3.6 => 1.3.6
@tarojs/taro-tt: 1.3.6 => 1.3.6
@tarojs/taro-weapp: 1.3.6 => 1.3.6
@tarojs/webpack-runner: 1.3.6 => 1.3.6
eslint-config-taro: 1.3.6 => 1.3.6
eslint-plugin-taro: 1.3.6 => 1.3.6
nerv-devtools: ^1.4.0 => 1.4.3
nervjs: ^1.4.0 => 1.4.3

👽 Taro v1.3.7

Taro CLI 1.3.7 environment info:
System:
OS: macOS 10.15
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.15.3 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
npmPackages:
@tarojs/cli: 1.3.7 => 1.3.7
@tarojs/components: 1.3.7 => 1.3.7
@tarojs/plugin-babel: 1.3.7 => 1.3.7
@tarojs/plugin-csso: 1.3.7 => 1.3.7
@tarojs/plugin-uglifyjs: 1.3.7 => 1.3.7
@tarojs/router: 1.3.7 => 1.3.7
@tarojs/taro: 1.3.7 => 1.3.7
@tarojs/taro-alipay: 1.3.7 => 1.3.7
@tarojs/taro-h5: 1.3.7 => 1.3.7
@tarojs/taro-swan: 1.3.7 => 1.3.7
@tarojs/taro-tt: 1.3.7 => 1.3.7
@tarojs/taro-weapp: 1.3.7 => 1.3.7
@tarojs/webpack-runner: 1.3.7 => 1.3.7
eslint-config-taro: 1.3.7 => 1.3.7
eslint-plugin-taro: 1.3.7 => 1.3.7
nerv-devtools: ^1.4.0 => 1.4.3
nervjs: ^1.4.0 => 1.4.3

补充信息

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[taro-bot]

CC @yuche

[luosheng]

我看了一下这个改动，在本地1.3.7版本中的node_modules/@taro_js/transformer-wx/lib/src/renders.js做了同样的修改，这个时候编译虽然不再报Cannot read property 'isCallExpression' of null了，但是会报Error: 以 render 开头的 props 只能传入包含一个 JSX 元素的 JSX 表达式。。

感觉是1.3.7之后Render Props的功能又被改回去了……

[yuche]

倒没有改回去，加这个只是个防御而已，真正解决这个 issue 的是 options.ts 文件的系列改动，d0bc3bd 和 65483aa07f7b18e8f3d6143f03cc7ddbf7a0818e。

[luosheng]

在1.3.9版本下测试了一下，仍然无法正常把Render Props写法的应用编译成微信小程序，报错见截图：

Taro info如下：

👽 Taro v1.3.9


  Taro CLI 1.3.9 environment info:
    System:
      OS: macOS 10.15
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 10.15.3 - /usr/local/bin/node
      Yarn: 1.13.0 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 1.3.9 => 1.3.9
      @tarojs/components: 1.3.9 => 1.3.9
      @tarojs/plugin-babel: 1.3.9 => 1.3.9
      @tarojs/plugin-csso: 1.3.9 => 1.3.9
      @tarojs/plugin-uglifyjs: 1.3.9 => 1.3.9
      @tarojs/router: 1.3.9 => 1.3.9
      @tarojs/taro: 1.3.9 => 1.3.9
      @tarojs/taro-alipay: 1.3.9 => 1.3.9
      @tarojs/taro-h5: 1.3.9 => 1.3.9
      @tarojs/taro-swan: 1.3.9 => 1.3.9
      @tarojs/taro-tt: 1.3.9 => 1.3.9
      @tarojs/taro-weapp: 1.3.9 => 1.3.9
      @tarojs/webpack-runner: 1.3.9 => 1.3.9
      eslint-config-taro: 1.3.9 => 1.3.9
      eslint-plugin-taro: 1.3.9 => 1.3.9
      nerv-devtools: ^1.4.0 => 1.4.3
      nervjs: ^1.4.0 => 1.4.3

[yuche]

还是没办法复现，你能把你的样例提交到 github 仓库吗

[luosheng]

代码已打包，请查收

render-props-example.zip

[yuche]

那个是 ESLint 报错，不影响编译的。另外 Taro 没办法一个文件写多个组件，你分开写就可以了。

文档和 ESLint 需要更新一下。

[foreverpw]

@yuche 如何支持下面的写法，现在这样写小程序编译的代码会报错，把代码段直接写到了wx:if中，感觉编译时加些处理可以解决

{this.props.renderHeader?this.props.renderHeader():<View>ddd</View>}

[yuche]

@yuche 如何支持下面的写法，现在这样写小程序编译的代码会报错，把代码段直接写到了wx:if中，感觉编译时加些处理可以解决

{this.props.renderHeader?this.props.renderHeader():<View>ddd</View>}

@foreverpw
这样的做法是做不到的，如果你仔细看文档的话就可以知道 this.props.children/render[A-Z] 就是 slot 的一个语法糖，是没有办法在运行时做判断的，框架本身并不知道你是否传入了 slot。