renderProps无法按照文档上的使用方式进行

[Jokcy]

问题描述
renderProps无法按照文档上说的使用方法进行调用，只能静态渲染

复现步骤
组件代码：

import Taro from '@tarojs/taro'

import { View } from '@tarojs/components'

export default function Page(props) {
  return <View>{props.renderPage('asd')}</View>
}

编译之后的axml

<block a:if="{{$taroCompReady}}">
    <view>{{anonymousState__temp}}</view>
</block>

会在_createData里面调用renderPage

var props = this.__props;
 var anonymousState__temp = props.renderPage('asd');

但是如果使用{this.renderPage}却可以正常运行，这一点跟文档不符。

https://nervjs.github.io/taro/docs/render-props.html

期望行为
可以对renderPage进行传参

根据 #4150 上的讨论，发现通过{ renderPage }在参数上结构然后调用是可以的。

所以现在剩下的问题是：props.renderPage()不行，以及无法传递匿名变量，比如renderPage('abc')，最终拿到的是undefined

系统信息

Taro v1.2 及以上版本已添加 taro info 命令，方便大家查看系统及依赖信息，运行该命令后将结果贴下面即可。

• 操作系统: [e.g. macos]
• Taro 版本 [e.g. v.1.3.12]
• Node.js 版本 [e.g. v10.13.0]
• 报错平台 [alipay]

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[taro-bot]

CC @yuche

[Jokcy]

根据 #4150 上的讨论，发现通过{ renderPage }在参数上结构然后调用是可以的。

所以现在剩下的问题是：props.renderPage()不行，以及无法传递匿名变量，比如renderPage('abc')，最终拿到的是undefined

[Jokcy]

@yuche 测试了一下，<View>{renderPage()}</View>这种方式在WEB端不行，WEB端只能{ renderPage }不支持方法调用。。。方法调用在WEB端会被编译成

function handleGetUserInfo(resp) {
      console.log(resp);
    }

    Taro.eventCenter.on("renderPageRsMpc", e => {
      if (!Taro.shallowEqual(e, this.renderPageRsMpc)) {
        this.renderPageRsMpc = e;
        this.setState({});
      }
    });

    const renderPageRsMpc = () => {
      return <View className="index">
              <Text>Hello world!</Text>
              <Button openType="getUserInfo" onGetUserInfo={handleGetUserInfo}>
                获取用户信息
              </Button>
            </View>;
    };

    return <Page renderPage={<View>{renderPageRsMpc(this.renderPageRsMpc)}</View>} />;

[Jokcy]

不太明白这么编译的理由。。。WEB端应该是最直接的，直接传方法就行

[Jokcy]

@yuche 有官方的交流渠道么，gitter，群啥的，因为公司重度使用Taro，目前正在项目开发，这一波完了之后会考虑贡献一下代码，希望能有一个快速交流的渠道

[nyrf]

交流群 在上面有嘛，#198

[Jokcy]

@yuche 修复了吗？有发版么？

[yuche]

晚点

[Jokcy]

@yuche 老哥，今天发版本么

[Jokcy]

@yuche 更新到1.3.14还是不行啊，WEB端编译没变，还是之前的。

render() {
    function handleGetUserInfo(resp) {
      console.log(resp);
    }

    Taro.eventCenter.on("renderPagenQmQL", e => {
      if (!Taro.shallowEqual(e, this.renderPagenQmQL)) {
        this.renderPagenQmQL = e;
        this.setState({});
      }
    });

    const renderPagenQmQL = () => {
      return <View className="index">
              <Text>Hello world!</Text>
              <Button openType="getUserInfo" onGetUserInfo={handleGetUserInfo}>
                获取用户信息
              </Button>
            </View>;
    };

    return <Page renderPage={<View>{renderPagenQmQL(this.renderPagenQmQL)}</View>} />;
  }

// page.js
export default class Page extends Taro.Component {
  render() {
    const props = this.props;

    return <View>{props.renderPage()}</View>;
  }

}

源码如下：

// page.js
import { View } from '@tarojs/components'

export default function Page(props) {
  return <View>{props.renderPage()}</View>
}

// 调用
return (
      <Page
        renderPage={() => {
          return (
            <View className='index'>
              <Text>Hello world!</Text>
              <Button openType='getUserInfo' onGetUserInfo={handleGetUserInfo}>
                获取用户信息
              </Button>
            </View>
          )
        }}
      />
    )

[yuche]

不好意思，
cea3579 的判断有一些问题，需要等待下一个版本了。

[YoringChen]

这个 renderProps 无法传参的问题，还没解决呀，咋关了 issue。
除了无法传参外，还有 Eslint 报错，真的很苦恼。

ESLint(taro/render-props) 错误：无法操作 this.props.renderRefresh
-----
  464 |         ></Map>
  465 |
> 466 |         { this.props.renderRefresh(11111) }

环境：

👽 Taro v1.3.22


  Taro CLI 1.3.22 environment info:
    System:
      OS: macOS 10.14.5
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
      npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
    npmPackages:
      @tarojs/async-await: 1.3.22 => 1.3.22
      @tarojs/components: 1.3.22 => 1.3.22
      @tarojs/plugin-babel: 1.3.22 => 1.3.22
      @tarojs/plugin-csso: 1.3.22 => 1.3.22
      @tarojs/plugin-sass: 1.3.22 => 1.3.22
      @tarojs/plugin-uglifyjs: 1.3.22 => 1.3.22
      @tarojs/redux: 1.3.22 => 1.3.22
      @tarojs/redux-h5: 1.3.22 => 1.3.22
      @tarojs/router: 1.3.22 => 1.3.22
      @tarojs/taro: 1.3.22 => 1.3.22
      @tarojs/taro-alipay: 1.3.22 => 1.3.22
      @tarojs/taro-h5: 1.3.22 => 1.3.22
      @tarojs/taro-swan: 1.3.22 => 1.3.22
      @tarojs/taro-tt: 1.3.22 => 1.3.22
      @tarojs/taro-weapp: 1.3.22 => 1.3.22
      @tarojs/webpack-runner: 1.3.22 => 1.3.22
      eslint-config-taro: 1.3.22 => 1.3.22
      eslint-plugin-taro: 1.3.22 => 1.3.22
      nerv-devtools: ^1.5.2 => 1.5.2
      nervjs: ^1.5.2 => 1.5.2
    npmGlobalPackages:
      typescript: 3.5.3

[tourze]

在2.2.15中依然不支持