Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

嵌套使用同一个组件,子组件的props会丢失(编译模板错误) #1551

Closed
yodagg opened this issue Dec 17, 2018 · 6 comments
Closed
Assignees

Comments

@yodagg
Copy link
Contributor

yodagg commented Dec 17, 2018

问题描述
封装一个组件为Base,Base组件会根据type显示不同的组件,做到动态组件的效果。
嵌套使用Base组件,仅type值不一样,编译出的模板里面将只有一个Base。

复现步骤

// Base组件
render() {
    const type = this.props.type

    switch(type) {
        case 'Row': {
            return (
                <Row>
                    {this.props.children}
                </Row>
            )
        }
        case 'Column': {
            return (
                <Column>
                    {this.props.children}
                </Column>
            )
        }
        case 'Carousel': {
            return <Carousel></Carousel>
        }
    }
}
// 使用
// 微信小程序当中只能看到0,Row的插槽没有显示
render() {
    return (
        <View>
            0
            <Base type='Row'>
                   1
                  <Base type='Column'>
                        2
                        <Base type='Carousel'></Base>
                  </Base>
            </Base>
        </View>
    )
}

微信小程序当中只能看到0,Row的插槽没有显示。若写成同级,Base组件将正常显示对应的type组件。

期望行为
能否修复这个问题,或者给出更好的动态组件方案?

报错信息

无报错

系统信息

  • 操作系统: [Windows 7]
  • Taro 版本 [v1.2.0-beta.16]
  • Node.js 版本 [v10.7.0]
  • 报错平台 [weapp]

补充信息

仅测试微信小程序,编译出的模板如下

<block>
    <view>0
        <base type="Row" __triggerObserer="{{ _triggerObserer }}" />
    </view>
</block>

手动调整模板后,微信小程序可正常显示

<block>
    <view>0
        <base type="Row" __triggerObserer="{{ _triggerObserer }}">
            <base type="Column" __triggerObserer="{{ _triggerObserer }}">
                <base type="Carousel" __triggerObserer="{{ _triggerObserer }}"></base>
            </base>
        </base>
    </view>
</block>
@taro-bot
Copy link

taro-bot bot commented Dec 17, 2018

欢迎提交 Issue~

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

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

Good luck and happy coding~

@taro-bot
Copy link

taro-bot bot commented Dec 17, 2018

CC @yuche

@taro-bot taro-bot bot assigned yuche Dec 17, 2018
@yuche yuche closed this as completed in cd48f4b Dec 17, 2018
@yuche
Copy link
Contributor

yuche commented Dec 17, 2018

base 换个名字就可以了

@mqliutie
Copy link

mqliutie commented Apr 7, 2019

类似的问题, 自己封装了一个地图组件, 传入的参数只剩一个onSelect
Content

render(){
    // location 从 store中拿出来的
    // 下面return只写了Map这部分(为了简洁)
    return (
         {isSettingMap && 
             <MyMap a={123} onSelect={this.handleSelect} onTest={()=>console.log(location)} />}
    )
}

在MyMap的任何生命周期打印this.props 都是一个只有onSelect的对象

编译好的wxml如下所示:

<block wx:if="{{isSettingMap}}">
            <ayz-map a="{{123}}" __triggerObserer="{{ _triggerObserer }}" bindontest="anonymousFunc0" bindonselect="_handleSelectLocation" __fn_onTest="{{true}}" __fn_onSelect="{{true}}"></ayz-map>
</block>

@yuche
Copy link
Contributor

yuche commented Apr 8, 2019

编译

打印是没用的,你要用到那个函数才会有值,具体看文档

@mqliutie
Copy link

mqliutie commented Apr 8, 2019

@yuche https://nervjs.github.io/taro/docs/props.html 文档看不到有说明
小程序没法看到深层组件的数据, 不用console,看不到组件内部拿到的数据呀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants