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

[ZGame]

1. 放 useContext 里,目前可接受

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

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

[LunaSeki]

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

[ZGame]

@LunaSeki 嗯传递的会不方便集中管理,而且透传几层也很蛋疼。
我在弄一个 bi 编辑页的需求,
export interface DesignContextType {
designerLeftRef: MutableRefObject<HTMLDivElement> ; // 设置 RefObject 的类型为 HTMLElement
contentRef: MutableRefObject<HTMLDivElement> ; // 设置 RefObject 的类型为 HTMLElement
containRef: MutableRefObject<HTMLDivElement> ; // 设置 RefObject 的类型为 HTMLElement
}

const DesignContext = React.createContext<DesignContextType|null >(null);


export const DesignContextProvider = (props) => {
return (
<DesignContext.Provider
value={{
designerLeftRef: useRef<HTMLDivElement>(),
contentRef: useRef<HTMLDivElement>(),
containRef:useRef<HTMLDivElement>(),
}}
>
{props.children}
</DesignContext.Provider>
);
};


export function useDesginDomContext(){

const context= useContext(DesignContext);

return {...context}
}

我目前是这样子在顶层用一个 useContext 去持有引用, 在想有没有更好的办法

[LunaSeki]

不是很清楚具体需求，你看能不能暴露一个 funcion = cb => cb(theRef)，这样可以保留 ref 的功能并且这个函数也能提到状态管理之类的地方吧

[LandCruiser]

说说具体需求

[kongkx]

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

[DiamondYuan]

页面最顶层放一个 context

[mxT52CRuqR6o5]

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

[ZGame]

@mxT52CRuqR6o5 是这样 但是无法使用就很难受了 排错

[ZGame]

@DiamondYuan 现在是这样去做

[mxT52CRuqR6o5]

@ZGame 那我看下来你是确实有把 ref 放到 redux 里的需求，可以在 ref 的 current 属性的同层加一个 toJSON 控制 JSON.stringify 的行为来 workaround devtools 的报错
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

[nulIptr]

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