**需求原型图：**
![](https://im.weaver.com.cn/server/index.php?s=/api/attachment/visitFile&sign=82fbfa6ae5fa66a4f2e816962aecbce7)
![](https://im.weaver.com.cn/server/index.php?s=/api/attachment/visitFile&sign=fef12afeb25659e343e3b8c8745c46a0)
## 1、需求说明
由于关注功能做了较大的调整，根据需求各个模块在点击关注的时候需要支持选择文件夹，为了减少各个模块的开发工作量
关注模块统一提供了两个关注组件供各个模块点击关注的时候调用。**各个模块关注的时候只需要控制该组件的显示与否就行具体请求由组件控制，取消关注还是走以前的逻辑**
## 2、实现逻辑
原来的关注是由各个模块直接调用关注接口实现关注，变动后的逻辑改为：
**（1）点击关注时候控制visible属性显示关注组件；
（2）显示组件后 组件内部逻辑会支持选择文件夹；
（3）文件夹选择完毕点击确定，关注成功回调successCallback 关注失败回调failCallback 模块可以在回调函数中实现控制     显示与否逻辑；
（4）点击取消按钮 触发cancel函数，cancel函数可以实现各个模块逻辑；
（5）取消关注还是走以前的逻辑由各个模块自己控制；**
## 3、调用方式DEMO
```html
render() {
    return (<div>
     {<CorsComponent weId={`${this.props.weId || ''}_4s0xx7`}
 app={"@weapp/my"}
 compName={"FollowAllChoiceFolder"} //移动端此处写MFollowAllChoiceFolder
 visible={attentionVisible}
 id={attentionId}
 module={attentionModule}
 successCallback={this.attentionCallback}
 failCallback={this.attentionCallback}
 cancel={this.attentionCancel}
 top={"100px"}
 ></CorsComponent>}
    </div>)
```
## 4、参数说明


| 参数       | 说明                 | 类型                             | 是否必填 | 默认值 |
|:-----------|:---------------------|:---------------------------------|:---------|:-------|
| visible   | 控制弹窗显示关闭 | boolean | 是       | -      |
| id | 事项ID             | string              | 否       | -      |
| module | 关注模块             | string              | 是       | -      |
| ids |  事项ID集合 批量关注的时候调用             | string[]              | 否       | -      |
| successCallback |  关注成功的时候回调            | () => void             | 否       | -      |
| failCallback |  关注失败的时候回调             | () => void             | 否       | -      |
| cancel |  点击取消的时候调用             | () => void             | 否       | -      |
| top |  弹窗距离顶部距离             |string           | 否       | -      |
| props |  H5需要传入pc版不需要传入             |RouteComponentProps           | 是       | -      |
| title |  事项名称             |string           | 否       | -      |
| customData |  自定义传参             |any           | 否       | -      |
| msgs |  关注的消息数据，消息格式可参考： [查看消息格式](http://192.168.0.135/web/#/26/2127 "[消息格式")            |[]MsgEntityData           | 否       | -      |
