多层组件嵌套 ，如何通过最底层的组件动态操作组件的挂载与卸载

[youngluo]

问题描述

1. 有一个基础组件 Mask

render() {
    const {  visible } = this.state

    return (
      visible && (
        <View
          className={classNames('mask', `mask-fade-${animationStatus}`, `mask-position-${position}`)}
          onTouchMove={this.onStopPropagation}
          onClick={this.onMaskClick}
        >
          <View
            className={classNames('mask-content', `mask-content-${type}-${animationStatus}`)}
            onClick={this.onStopPropagation}
          >
            {this.props.children}
          </View>
        </View>
      )
    )
  }

2. 基于 Mask 组件实现一个 Filter 组件

render() {
    const { okText, visible, maskClosable } = this.props

    return (
      <Mask
        maskClosable={maskClosable}
        onCancel={this.onCancel}
        visible={visible}
      >
        <View className='filter-container'>
          {this.props.children}
          <FtButton
            class-name='filter-container-button'
            onClick={this.onOk}
            type='primary'
          >
            {okText}
          </FtButton>
        </View>
      </Mask>
    )
  }

3. 页面中使用 Filter 组件

render() {
    return (
      <Filter
        visible={this.props.visible}
        onCancel={this.onCancel}
        onOk={this.onOk}
      >
        <FilterItem label='搜索'>
          <Search
            placeholder='请输入姓名'
            onChange={this.onSearch}
          />
        </FilterItem>
        <FilterItem label='状态'>
          <FilterStatus onChange={this.onStatusChange} />
        </FilterItem>
      </Filter>
    )
  }

4. 打包后，页面中 Filter 组件不显示的渲染结果
   

5. Filter 组件显示的渲染结果
   

像这样的多层组件嵌套 ，如何通过最底层的 Mask 组件的 visible prop 来做到动态操作组件的挂载与卸载;
目前可以控制组件的显示隐藏，但是数据状态会被保留下来

系统信息

• 操作系统: [e.g. macOS 10.13.3 ]
• Taro 版本 [e.g. v.1.1.0]
• Node.js 版本 [e.g. v8.11.3]
• 报错平台 [weapp]

[luckyadam]

我觉的应该是在使用 Filter 的地方决定

{ 
  isShow && <Filter
        visible={this.props.visible}
        onCancel={this.onCancel}
        onOk={this.onOk}
      >
        <FilterItem label='搜索'>
          <Search
            placeholder='请输入姓名'
            onChange={this.onSearch}
          />
        </FilterItem>
        <FilterItem label='状态'>
          <FilterStatus onChange={this.onStatusChange} />
        </FilterItem>
      </Filter>
}

[youngluo]

这样做动画逻辑就不能复用了

[luckyadam]

只能通过这种逻辑判断决定某一元素是否挂载与卸载，所以就看这个判断条件你要写在哪里了

[youngluo]

是的

[youngluo]

@luckyadam react 的 render props 写法是否还不支持？

[luckyadam]

暂时还不支持~ 正在加紧开发中

[luckyadam]

@youngluo render props 功能可以新提一个 feature request 的 issue，方便追踪

[youngluo]

@luckyadam 行，目前这个有什么替代方案吗

[luckyadam]

只能传参进入组件，在组件里处理了

[youngluo]

👌

[youngluo]

@luckyadam 感谢