放 useContext 里,目前可接受
放 redux zustand 里。 不过这样子相关的 redux devtool 中间件会报错失效 因为存在 JSON.stringify 无法解析的问题,关闭中间件调试起来会有点麻烦
通过传递 ref, 感觉这种写法有点累
1
LunaSeki 66 天前
比起传递 ref ,感觉传递操作 ref 的方法比较好吧
|
2
ZGame OP @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 去持有引用, 在想有没有更好的办法 |
3
LunaSeki 66 天前
不是很清楚具体需求,你看能不能暴露一个 funcion = cb => cb(theRef),这样可以保留 ref 的功能并且这个函数也能提到状态管理之类的地方吧
|
4
LandCruiser 66 天前
说说具体需求
|
![]() |
5
kongkx 66 天前 via iPhone
|
6
DiamondYuan 66 天前 via Android
页面最顶层放一个 context
|
7
mxT52CRuqR6o5 65 天前 via Android
放了会因为无法序列化影响 devtools 的使用,并不是说绝对不能放
|
8
ZGame OP @mxT52CRuqR6o5 是这样 但是无法使用就很难受了 排错
|
9
ZGame OP @DiamondYuan 现在是这样去做
|
10
mxT52CRuqR6o5 65 天前 via Android
@ZGame 那我看下来你是确实有把 ref 放到 redux 里的需求,可以在 ref 的 current 属性的同层加一个 toJSON 控制 JSON.stringify 的行为来 workaround devtools 的报错
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify |
11
nulIptr 65 天前
我觉得 ref 传来传去纯属多余,不如返璞归真,
1.用的时候去 querySelector ,jquery 玩法。看你贴的代码里面 ref 都是 div 类型,估计是没挂什么 ImperativeHandle ,光拿 dom ,你代码里面贴的部分,byId 就够用了,也不会太混乱 2.如果挂了 ImperativeHandle 的话就改成在目标组件注册事件监听。通过事件机制调用方法。 |