从 DOM 中选择元素 - Reasonml/BuckleScript querySelector答案

【问题标题】：Selecting elements from the DOM - Reasonml/BuckleScript querySelector从 DOM 中选择元素 - Reasonml/BuckleScript querySelector
【发布时间】：2018-01-13 23:53:10
【问题描述】：

您将如何使用 Reason 从 DOM 中选择项目。我正在使用 bs-webapi 进行 DOM 绑定，这就是我想要做的：

let parent = document |> Document.querySelector(".parent");
let child = Element.querySelector(".child", parent);

但是，BuckleScript 抱怨，因为 parent 类型不正确。它说父母的类型是option(Dom.element)，父母应该是Dom.element.t。我是 Reason 的新手，正在努力学习。我不明白option(Dom.element) 的含义或如何使上述代码块这样的东西工作。非常感谢任何帮助

【问题讨论】：

标签： dom reason bucklescript

【解决方案1】：

您需要解开选项变体，我们可以使用开关并使用内置的 None/Some 变体来做到这一点。

您可以在此处找到有关选项变体的一些文档：https://reasonml.github.io/docs/en/newcomer-examples.html#using-the-option-type

这里有更多关于选项的文档：https://reasonml.github.io/docs/en/variant.html#option

为此，您需要将代码更改为以下内容：

let parent = document |> Document.querySelector(".parent");
let child = switch (parent) {
  | Some(p) => switch (Element.querySelector(".child", p)) {
    | Some(c) => c
    | None => raise(Failure("Unable to find child selector"))
  }
  | None => raise(Failure("Unable to find parent selector"))
};

如果您想改为登录控制台而不是失败，则需要返回一个有效的Dom.element.t，可能是这样的：

let emptyEl = document |> Document.createElement("noscript");
let parent = document |> Document.querySelector(".parent");
let child = switch (parent) {
  | Some(p) => switch (Element.querySelector(".child", p)) {
    | Some(c) => c
    | None => {
      Js.log("Unable to find child selector");
      emptyEl;
    }
  }
  | None => {
    Js.log("Unable to find parent selector");
    emptyEl;
  }
};

然后，您需要检查您的子元素是否为 noscript，以查看您是否找到了您正在寻找的子元素。

【讨论】：

这行得通。我正在这样做；但是，它正在中断，因为我没有引发失败，而是试图在 none 中执行 Js.log。那么在使用选项变体时，变体中的类型必须匹配？失败与 Dom.element 有何相同之处？感谢您的回答，我只是想了解一下。
是的，类型必须仍然匹配。 Js.log 不起作用的原因是它实际上返回了 unit 类型。而 raise 返回 'a 的类型，它可以是任何东西。所以在上面的例子中它将是一个 Dom.element.t.
再次感谢您的回复 - 这解释了很多。如果我不想让程序因为找不到父母而中断怎么办？如果我只想记录找不到父对象怎么办？我尝试在开关下方添加一个 Js.log，但它没有记录，因为现在由于引发了失败，我得到了一个未捕获的异常。
我已经更新了答案以显示这两种方法，并希望指出你想去的地方。