render props 在微信小程序中不渲染（编译通过）

[hnsylitao]

问题描述
render props 在微信小程序中不渲染（编译通过）

复现步骤

Profile.tsx

  import Taro, { Component, Config } from '@tarojs/taro'
import { Block, Text, View } from '@tarojs/components'
import styles from './index.module.less'
import Test from "../../containers/Test";

interface ProfileProps {
}

interface ProfileState {
}

class Profile extends Component<ProfileProps, ProfileState> {

  config: Config = {
    navigationBarTitleText: '我的',
  };

  renderAfter(){
    return <Text>这里是插入到组件slot name="after"中的内容</Text>
  }

  render() {
    const before = <Block><Text>这里是插入到组件slot name="before"中的内容</Text></Block>
    return <View className={styles.page} >
      <Test renderBefore={before} renderAfter={this.renderAfter()} />
    </View >;
  }
}

export default Profile

Test.tsx

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'

interface TestProps {
  renderBefore?: any
  renderAfter?: any
}

interface TestState {
}

class Test extends Component<TestProps, TestState> {

  render() {
    return <View >
      {this.props.renderBefore}
      <View>这里是组件的内部细节</View>
      {this.props.renderAfter}
    </View >;
  }
}

export default Test;

期望行为
[这里请用简洁清晰的语言描述你期望的行为]

报错信息

[这里请贴上你的完整报错截图或文字]

系统信息

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

Taro CLI 1.3.12 environment info:
System:
OS: Windows 10
Binaries:
Node: 10.15.3 - D:\Application\Development\nodejs\node.EXE
Yarn: 1.16.0 - D:\Application\Development\npm\yarn.CMD
npm: 6.4.1 - D:\Application\Development\nodejs\npm.CMD

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[yuche]

<Test renderBefore={before} renderAfter={() => <Block>{this.renderAfter()}</Block>} />
这样试试

另外你调用的时候 this.props.renderAfter 应该是函数

[hnsylitao]

after 会显示出来了，但是before还是不会显示出来，必须把block 去除换成view 才能显示出来。
我想知道为什么会产生这样的影响。
以及为什么render props 的时候不能传入 renderAfter 方法
必须转换成函数的形式来使用。
谢谢

[taro-bot]

CC @yuche

[yuche]

必须转换成函数的形式来使用。

1. 那这就是微信的 bug 了，我会跟他们提；
2. 你传入的是一个函数只能以一个函数的形式调用，这类是编程基础，你可以自行寻找相关资料

[hnsylitao]

@yuche 你说得第2点我没有疑问，

这里说出了两个问题，
1.before 传入Block 导致不渲染
2.after 传入renderAfter（转换出来得template） 导致不渲染

[yuche]

1. 那就是微信传入的 bug，block 不能有 slot 名，如果你用原生写 slot 也是一样的；
2. 跟第一个问题一样，templtae 不能有 slot 名，这个 Taro 这边倒是可以加一层；

[hnsylitao]

理解了，这点在官方文档上面可能对我造成了误解

https://nervjs.github.io/taro/docs/children.html

组合只能传入单个 JSX 元素，不能传入其它任何类型。当你需要进行一些条件判断或复杂逻辑操作的时候，可以使用一个 Block 元素包裹住，然后在 Block 元素的里面填充其它复杂的逻辑。

[yuche]

嗯，这里文档要更新下，你不说我也不知道有这个问题。

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~