微信小程序组合（props.renderChildren ）会被多余的 view 包裹

[Miaonster]

问题描述

使用组合时，renderChildren 时 Taro 会为 children 包裹一层 <View />

复现步骤

从 1.3.14 后都有此行为，使用下面代码就可以复现

/**
 * pages/index/index.js
 */
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import Dialog from '../../components/Dialog';
import './index.css'

export default class Index extends Component {
  render() {
    return (
      <View className='index'>
        <Text>Hello world!</Text>
        <Dialog
          renderHeader={
            <View>header</View>
          }
          renderFooter={
            <View>footer</View>
          }
        >
          body
        </Dialog>
      </View>
    )
  }
}

/**
 * components/Dialog/index.js
 */
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'

export default class Dialog extends Component {
  render() {
    return (
      <View className='dialog'>
        <View className='header'>
          {this.props.renderHeader}
        </View>
        <View className='body'>
          {this.props.children}
        </View>
        <View className='footer'>
          {this.props.renderFooter}
        </View>
      </View>
    )
  }
}

npm run build:weapp 可以在 dist 文件夹中找到 pages/index/index.wxml，代码如下

<block wx:if="{{$taroCompReady}}">
    <view class="index"><text>Hello world!</text>
        <dialog compid="{{$compid__3}}">body
            <view slot="header">
                <view>header</view>
            </view>
            <view slot="footer">
                <view>footer</view>
            </view>
        </dialog>
    </view>
</block>

期望行为

可以看到，生成的代码中 slot="header" 没有在 <view>header</view> 上，而是将 <view>header</view> 包裹了一层 <view>，并在这层 <view> 上添加了 slot。

这导致了无论是组件 Dialog 还是调用方都无法控制新增加的 <view> 样式，给开发增加了很多难度。而在 1.3.13 时 build 后的代码没有这层新增加的 <view>。

报错信息

系统信息

👽 Taro v1.3.27


  Taro CLI 1.3.27 environment info:
    System:
      OS: macOS 10.15.1
      Shell: 3.0.2 - /usr/local/bin/fish
    Binaries:
      Node: 12.12.0 - ~/.config/nvm/12.12.0/bin/node
      Yarn: 1.19.1 - /usr/local/bin/yarn
      npm: 6.13.0 - ~/.config/nvm/12.12.0/bin/npm
    npmPackages:
      @tarojs/components: 1.3.27 => 1.3.27
      @tarojs/components-qa: 1.3.27 => 1.3.27
      @tarojs/plugin-babel: 1.3.27 => 1.3.27
      @tarojs/plugin-csso: 1.3.27 => 1.3.27
      @tarojs/plugin-uglifyjs: 1.3.27 => 1.3.27
      @tarojs/router: 1.3.27 => 1.3.27
      @tarojs/taro: 1.3.27 => 1.3.27
      @tarojs/taro-alipay: 1.3.27 => 1.3.27
      @tarojs/taro-h5: 1.3.27 => 1.3.27
      @tarojs/taro-qq: 1.3.27 => 1.3.27
      @tarojs/taro-quickapp: 1.3.27 => 1.3.27
      @tarojs/taro-swan: 1.3.27 => 1.3.27
      @tarojs/taro-tt: 1.3.27 => 1.3.27
      @tarojs/taro-weapp: 1.3.27 => 1.3.27
      @tarojs/webpack-runner: 1.3.27 => 1.3.27
      eslint-config-taro: 1.3.27 => 1.3.27
      eslint-plugin-taro: 1.3.27 => 1.3.27
      nerv-devtools: ^1.5.5 => 1.5.6
      nervjs: ^1.5.5 => 1.5.6
      stylelint-config-taro-rn: 1.3.27 => 1.3.27
      stylelint-taro-rn: 1.3.27 => 1.3.27

补充信息

造成这个问题的原因可能是这个 commit

[taro-bot]

CC @Chen-jj

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[shenghanqin]

看了changelog，里面提交了这个修改。 “transformer: 小程序 slot 统一用 view 包裹，close #4162 (fb9c769)” ， @yuche 帮忙看一下这个问题吧。

[taro-bot]

CC @yuche

[yeojongki]

@yuche 这个 issue 有进展吗 有同样的问题

[Chen-jj]

Taro3 应该没有这个问题了。