react 怎么给每个组件都加上刷新按钮？感觉这种需求很难搞。。修改 antd 的源码能行吗

[790002517zzy]

比如这样的需求，有什么比较好的方式吗？刷新当前组件的方式也可以。


组件都是用 antd 的 Modal 弹出来的，只要刷 Modal 就行：

[rookie2luochao]

看不到你的图片，组件都加上刷新是什么意思，从来没遇到过所有组件刷新，你的组件指的是业务组件，还是要包含 UI 组件，如果是组件里面的接口有联动，可以用 rxjs 构造成可观察对象，或者用 react-query 来做组件之间的接口联动

demo: https://github.com/rookie-luochao/create-vite-app-cli/tree/master/template-react-ts#%E8%B0%83%E7%94%A8%E6%8E%A5%E5%8F%A3react-query-%E6%94%AF%E6%8C%81%E8%87%AA%E5%8A%A8loading%E5%92%8C%E6%8E%A5%E5%8F%A3%E8%AF%B7%E6%B1%82%E8%81%94%E5%8A%A8

[mxT52CRuqR6o5]

写个能传 children 的组件

[790002517zzy]

@rookie2luochao 看不到图应该是梯子问题 只需要刷新最前面的组件就行，类似于刷新 z-index 最高的 Modal 即可（目的是刷新数据）


@mxT52CRuqR6o5 这样的话就需要改每个页面了

[rookie2luochao]

@790002517zzy 你的目的是刷新数据的话，可以看看我发的那个链接，那个库能很好的处理跨组件之间的接口联动刷新问题，你也可以用 rxjs 实现

[douxc]

呃，modal 弹出来的时候请求一次数据？那就在 modal 显示的时候处理一下，useEffect 监听 open/close 状态，发现是显示就去获取数据

[790002517zzy]

比如如果用 iframe 实现 Modal 可以使用 reload 让浏览器刷新(图 1 就是这样实现的）
但是组件形式如果用 reload 会导致这个 url 刷新，而需求只需要刷新 Modal

[790002517zzy]

@douxc modal 弹出来后，数据会变动（其他用户操作了这个数据），所以用户需要一个刷新按钮刷新当前 modal 中的数据

[790002517zzy]

@rookie2luochao RxJS 好像可以，看起来像是会自动更新数据？可我很多个页面都用了 modal ，这样改的话也需要每个页面都去改。 还不如重新封装 modal 组件了

[googleaccount]

追求数据实时性 考虑用 websocket ？

[790002517zzy]

@googleaccount 不是实时性，就是用户想点一下就看最新的数据，而不是 F5 刷新还要点半天才能打开这个 modal

[CHTuring]

1 、如果只是数据数据更新的话，每次 modal 关闭的时候销毁内部的组件就可以实现。
2 、如果是希望复用，一个高阶函数就能实现

[gaogang]

组件内部可变化的数据是拿不到吗?
直接用 props 传进去的话，传入的值变了的话，组件不是会就会重新渲染了吗

[ZSeptember]

基于 antd 的 modal 封装一个 modal ，固定给 modal 新增一个 refresh 按钮和 refresh 的 action 。

refresh 的默认行为可以是将 children 替换为一个 loading 页面，然后再重新加载 children ，就会触发 children 重新加载吧。

[leroy20317]

Modal.useModal() modal 提供的 hooks 上下文可以用不？

[ZZITE]

refresh 数据不就行了吗？你的数据是在哪一层，通过什么形式获取的？
我举个例子，假设是在 modal 内部自己通过 react-query 这种请求管理工具获取的数据，那么在刷新按钮点击时执行一次 refetch 或者 invalidateQueries ，modal 内的数据就更新了。可以通过高阶组件的形式，把所有 modal 都包裹一下，统一加上刷新按钮的功能。

[leroy20317]

要是只是想重新 render 一次，const [, setState] = useState({}); setState({}) 也可以的

[veveue]

这就要看 modal 获取数据的逻辑怎么写的了

[cydian]

swr

[ColdBird]

整个组件包一下不就得了，按你说的只对 modal 做操作那不是简单的很，不至于上升到对全部 Antd 组件的处理。
* 方案 1：props 里只传 data ，这样内部不关心 data 的变更，外层 refresh 之后自己请求数据，内层更新 UI
* 方案 2：props 里传 onLoad 作为加载回调、payload 作为触发器，监听 payload 的变化调用 onLoad 请求数据，再这个基础上抽象一下，不难实现

[790002517zzy]

就是想刷新 Modal 嵌套的组件...这样的话就达到了刷新数据的效果
上面说的从数据获取上着手就要每个页面都要改，工作量太大