V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ZGame
V2EX  ›  React

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

  •  
  •   ZGame · 172 天前 · 1641 次点击
    这是一个创建于 172 天前的主题,其中的信息可能已经有所发展或是发生改变。
    1. 放 useContext 里,目前可接受

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

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

    11 条回复    2024-07-04 10:33:05 +08:00
    LunaSeki
        1
    LunaSeki  
       172 天前
    比起传递 ref ,感觉传递操作 ref 的方法比较好吧
    ZGame
        2
    ZGame  
    OP
       172 天前
    @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
        3
    LunaSeki  
       172 天前
    不是很清楚具体需求,你看能不能暴露一个 funcion = cb => cb(theRef),这样可以保留 ref 的功能并且这个函数也能提到状态管理之类的地方吧
    LandCruiser
        4
    LandCruiser  
       172 天前
    说说具体需求
    DiamondYuan
        6
    DiamondYuan  
       172 天前 via Android
    页面最顶层放一个 context
    mxT52CRuqR6o5
        7
    mxT52CRuqR6o5  
       171 天前 via Android
    放了会因为无法序列化影响 devtools 的使用,并不是说绝对不能放
    ZGame
        8
    ZGame  
    OP
       171 天前
    @mxT52CRuqR6o5 是这样 但是无法使用就很难受了 排错
    ZGame
        9
    ZGame  
    OP
       171 天前
    @DiamondYuan 现在是这样去做
    mxT52CRuqR6o5
        10
    mxT52CRuqR6o5  
       171 天前 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
    nulIptr
        11
    nulIptr  
       171 天前
    我觉得 ref 传来传去纯属多余,不如返璞归真,
    1.用的时候去 querySelector ,jquery 玩法。看你贴的代码里面 ref 都是 div 类型,估计是没挂什么 ImperativeHandle ,光拿 dom ,你代码里面贴的部分,byId 就够用了,也不会太混乱
    2.如果挂了 ImperativeHandle 的话就改成在目标组件注册事件监听。通过事件机制调用方法。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4944 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 01:19 · PVG 09:19 · LAX 17:19 · JFK 20:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.