{"action":"created","issue":{"url":"https://api.github.com/repos/NervJS/taro/issues/1085","repository_url":"https://api.github.com/repos/NervJS/taro","labels_url":"https://api.github.com/repos/NervJS/taro/issues/1085/labels{/name}","comments_url":"https://api.github.com/repos/NervJS/taro/issues/1085/comments","events_url":"https://api.github.com/repos/NervJS/taro/issues/1085/events","html_url":"https://github.com/NervJS/taro/issues/1085","id":379677143,"node_id":"MDU6SXNzdWUzNzk2NzcxNDM=","number":1085,"title":"多层组件嵌套 ，如何通过最底层的组件动态操作组件的挂载与卸载","user":{"login":"youngluo","id":7480381,"node_id":"MDQ6VXNlcjc0ODAzODE=","avatar_url":"https://avatars2.githubusercontent.com/u/7480381?v=4","gravatar_id":"","url":"https://api.github.com/users/youngluo","html_url":"https://github.com/youngluo","followers_url":"https://api.github.com/users/youngluo/followers","following_url":"https://api.github.com/users/youngluo/following{/other_user}","gists_url":"https://api.github.com/users/youngluo/gists{/gist_id}","starred_url":"https://api.github.com/users/youngluo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/youngluo/subscriptions","organizations_url":"https://api.github.com/users/youngluo/orgs","repos_url":"https://api.github.com/users/youngluo/repos","events_url":"https://api.github.com/users/youngluo/events{/privacy}","received_events_url":"https://api.github.com/users/youngluo/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2018-11-12T08:55:02Z","updated_at":"2018-11-14T07:40:13Z","closed_at":null,"author_association":"NONE","body":"**问题描述**\r\n\r\n1. 有一个基础组件 Mask\r\n```jsx\r\nrender() {\r\n    const {  visible } = this.state\r\n\r\n    return (\r\n      visible && (\r\n        <View\r\n          className={classNames('mask', `mask-fade-${animationStatus}`, `mask-position-${position}`)}\r\n          onTouchMove={this.onStopPropagation}\r\n          onClick={this.onMaskClick}\r\n        >\r\n          <View\r\n            className={classNames('mask-content', `mask-content-${type}-${animationStatus}`)}\r\n            onClick={this.onStopPropagation}\r\n          >\r\n            {this.props.children}\r\n          </View>\r\n        </View>\r\n      )\r\n    )\r\n  }\r\n```\r\n\r\n2. 基于 Mask 组件实现一个 Filter 组件\r\n```jsx\r\nrender() {\r\n    const { okText, visible, maskClosable } = this.props\r\n\r\n    return (\r\n      <Mask\r\n        maskClosable={maskClosable}\r\n        onCancel={this.onCancel}\r\n        visible={visible}\r\n      >\r\n        <View className='filter-container'>\r\n          {this.props.children}\r\n          <FtButton\r\n            class-name='filter-container-button'\r\n            onClick={this.onOk}\r\n            type='primary'\r\n          >\r\n            {okText}\r\n          </FtButton>\r\n        </View>\r\n      </Mask>\r\n    )\r\n  }\r\n```\r\n\r\n3. 页面中使用 Filter 组件\r\n```jsx\r\nrender() {\r\n    return (\r\n      <Filter\r\n        visible={this.props.visible}\r\n        onCancel={this.onCancel}\r\n        onOk={this.onOk}\r\n      >\r\n        <FilterItem label='搜索'>\r\n          <Search\r\n            placeholder='请输入姓名'\r\n            onChange={this.onSearch}\r\n          />\r\n        </FilterItem>\r\n        <FilterItem label='状态'>\r\n          <FilterStatus onChange={this.onStatusChange} />\r\n        </FilterItem>\r\n      </Filter>\r\n    )\r\n  }\r\n```\r\n\r\n4.  打包后，页面中 Filter 组件不显示的渲染结果\r\n![image](https://user-images.githubusercontent.com/7480381/48332440-bcad0400-e68e-11e8-8758-888bd41ff468.png)\r\n\r\n5.  Filter 组件显示的渲染结果\r\n![image](https://user-images.githubusercontent.com/7480381/48332519-144b6f80-e68f-11e8-928e-9ee7849e79b8.png)\r\n\r\n像这样的多层组件嵌套 ，如何通过最底层的 Mask 组件的 visible prop 来做到动态操作组件的挂载与卸载;\r\n目前可以控制组件的显示隐藏，但是数据状态会被保留下来\r\n\r\n**系统信息**\r\n\r\n - 操作系统: [e.g. macOS 10.13.3 ]\r\n - Taro 版本 [e.g. v.1.1.0]\r\n - Node.js 版本 [e.g. v8.11.3]\r\n - 报错平台 [weapp]\r\n"},"comment":{"url":"https://api.github.com/repos/NervJS/taro/issues/comments/438567103","html_url":"https://github.com/NervJS/taro/issues/1085#issuecomment-438567103","issue_url":"https://api.github.com/repos/NervJS/taro/issues/1085","id":438567103,"node_id":"MDEyOklzc3VlQ29tbWVudDQzODU2NzEwMw==","user":{"login":"luckyadam","id":1782542,"node_id":"MDQ6VXNlcjE3ODI1NDI=","avatar_url":"https://avatars2.githubusercontent.com/u/1782542?v=4","gravatar_id":"","url":"https://api.github.com/users/luckyadam","html_url":"https://github.com/luckyadam","followers_url":"https://api.github.com/users/luckyadam/followers","following_url":"https://api.github.com/users/luckyadam/following{/other_user}","gists_url":"https://api.github.com/users/luckyadam/gists{/gist_id}","starred_url":"https://api.github.com/users/luckyadam/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/luckyadam/subscriptions","organizations_url":"https://api.github.com/users/luckyadam/orgs","repos_url":"https://api.github.com/users/luckyadam/repos","events_url":"https://api.github.com/users/luckyadam/events{/privacy}","received_events_url":"https://api.github.com/users/luckyadam/received_events","type":"User","site_admin":false},"created_at":"2018-11-14T07:40:13Z","updated_at":"2018-11-14T07:40:13Z","author_association":"CONTRIBUTOR","body":"暂时还不支持~ 正在加紧开发中"}}
{"actor":{"display_login":"luckyadam"}}