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

123 天前
 ZGame
  1. 放 useContext 里,目前可接受

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

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

1451 次点击
所在节点    React
11 条回复
LunaSeki
123 天前
比起传递 ref ,感觉传递操作 ref 的方法比较好吧
ZGame
123 天前
@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
123 天前
不是很清楚具体需求,你看能不能暴露一个 funcion = cb => cb(theRef),这样可以保留 ref 的功能并且这个函数也能提到状态管理之类的地方吧
LandCruiser
123 天前
说说具体需求
kongkx
123 天前
DiamondYuan
122 天前
页面最顶层放一个 context
mxT52CRuqR6o5
122 天前
放了会因为无法序列化影响 devtools 的使用,并不是说绝对不能放
ZGame
122 天前
@mxT52CRuqR6o5 是这样 但是无法使用就很难受了 排错
ZGame
122 天前
@DiamondYuan 现在是这样去做
mxT52CRuqR6o5
122 天前
@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
122 天前
我觉得 ref 传来传去纯属多余,不如返璞归真,
1.用的时候去 querySelector ,jquery 玩法。看你贴的代码里面 ref 都是 div 类型,估计是没挂什么 ImperativeHandle ,光拿 dom ,你代码里面贴的部分,byId 就够用了,也不会太混乱
2.如果挂了 ImperativeHandle 的话就改成在目标组件注册事件监听。通过事件机制调用方法。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1054564

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX