react+antd中popover里加个按钮所遇到的坑

Posted 2023-04-28

参考技术A     1、由于popover是写在表格的最后一列，而这个时候，需要用到visible属性（用于手动控制浮层显隐）。

        这个时候出现的问题就是会遍历出很多个title出来。

这是因为你有多少条数据，就便利了多少遍。

解决办法：

利用数据字段的唯一性，来控制其中的弹窗。

2、里面的按钮不能传值出去。

解决办法：

antd中，popover 不同情境下设置不同背景图，无法设置className的情况

这次项目有一个需求，就是右上角一个 气泡弹窗 popover ，当会员状态是已过期的时候，背景图成白色渐变，如果是未过期，就是黑色渐变。

于是就想通过设置不同的 status 值来添加不同的  className ， 以设置  .ant-popover-inner 的样式来设置背景图，  当然，这样做有一个不完美的就是不能一步到位的全部改变，需要手动更改 

.ant-popover-placement-bottom > .ant-popover-content > .ant-popover-arrow 来替换那个角角的值。

 

但这都不是问题！问题就在于，我给  Popover 组件设置 className ，根本不生效，F12 查看根本就没有！  于是就各种想办法，添加给外面，通过js找元素【react根本不吃这一套】

最后，终于被我找到了一个叫做 【 overlayClassName 】的设置className 方式！

 

办法就是在组件上直接添加，

　　　　<Popover overlayClassName=‘popUpStatus3‘ visible={showRenewModel} placement="bottom" content={content3} trigger="click">

                  <div className=‘vendor-header-icon‘ onClick={() => this.RenewModel()}>

                    <HomeFill className="header-home-icon" width="15px" height="15px" />

                  </div>

                </Popover>

这样你渲染出来的就会有 class 值，就可以通过这种方式给不同状态设置不同的背景图啦！

 

最后，祝大家开发顺利！