首页 > 解决方案 > 如何对 React.Ref.t(Js.Nullable.t('a)) 类型的值进行模式匹配

问题描述

我正在尝试将 DOM 元素作为 JS 对象访问。

let navRef = React.useRef(Js.Nullable.null);
  let width =
    switch (Js.Nullable.toOption(navRef)) {
    | None => 0.0
    | Some(nav) => ReactDOMRe.domElementToObj(nav)##clientWidth
    };

但是我在里面的 navRef 上有一个类型错误Js.Nullable.toOption

错误:此表达式的类型为 React.Ref.t(Js.Nullable.t('a)) 但表达式应为 Js.Nullable.t('b) = Js.nullable('b) 类型

标签: reasonreason-react

解决方案


React.Ref.t是一种不透明的类型,因此您不能直接对其进行模式匹配。但是您可以使用以下方式访问 ref 的值,React.Ref.current然后对其进行模式匹配:

let navRef = React.useRef(Js.Nullable.null);
  let width =
    switch (Js.Nullable.toOption(React.Ref.current(navRef))) {
    | None => 0.0
    | Some(nav) => ReactDOMRe.domElementToObj(nav)##clientWidth
    };

推荐阅读