React 里关于 html dom 节点 ref 的引用放哪里比较好,以及在 redux ,zustand 这类框架持有 解析 JSON.stringify()报错的问题

1. 放 useContext 里,目前可接受

2. 放 redux zustand 里。 不过这样子相关的 redux devtool 中间件会报错失效 因为存在 JSON.stringify 无法解析的问题,关闭中间件调试起来会有点麻烦

3.  通过传递 ref, 感觉这种写法有点累

我觉得 ref 传来传去纯属多余，不如返璞归真，
1.用的时候去 querySelector ，jquery 玩法。看你贴的代码里面 ref 都是 div 类型，估计是没挂什么 ImperativeHandle ，光拿 dom ，你代码里面贴的部分，byId 就够用了，也不会太混乱
2.如果挂了 ImperativeHandle 的话就改成在目标组件注册事件监听。通过事件机制调用方法。

放了会因为无法序列化影响 devtools 的使用，并不是说绝对不能放

页面最顶层放一个 context

https://redux.js.org/style-guide/#do-not-put-non-serializable-values-in-state-or-actions

说说具体需求

比起传递 ref ，感觉传递操作 ref 的方法比较好吧