如何对 React.Ref.t(Js.Nullable.t('a)) 类型的值进行模式匹配

Question

我正在尝试将 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

Error: This expression has type React.Ref.t(Js.Nullable.t('a)) but an expression was expected of type Js.Nullable.t('b) = Js.nullable('b)

Answer 1

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

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
    };

如何对 React.Ref.t(Js.Nullable.t('a)) 类型的值进行模式匹配

How to pattern match on a value of type React.Ref.t(Js.Nullable.t('a))

reason

reason-react