javascript - 如何在 ReScript 中执行 document.createElement

Question

ReScript 似乎是编写 JS 代码的更好方法，但我无法找到应该是简单的单行文档的内容。

我如何调用函数document.createElement()？

我通过查看此页面尝试了 Js.document、Dom.document：https ://rescript-lang.org/docs/manual/latest/api ，但该代码在操场上出现错误：

documentJs中找不到值Dom中找不到
值document

Answer 1

要调用 JS 函数，您需要使用 ReScript 的JS interop。在这种情况下，您可以使用external关键字和 @val/@scope属性来获取调用时将调用的 ReScript 函数document.createElement：

@val @scope(("window", "document"))
external createElement: string => unit = "createElement"

createElement("div")

这将转换为

window.document.createElement('div');

对于快速原型制作，您也可以直接使用externalRS Objects 等对象并与之交互：

@val external document: 'a = "document"

document["createElement"]("div")

查看互操作备忘单和文档以external了解更常见的模式。

Answer 2

你可以使用 bs-webapi

open Webapi.Dom
open Belt

document
->Document.asHtmlDocument
->Option.flatMap(document => document->HtmlDocument.body)
->Option.map(body => {
  let root = document->Document.createElement("div", _)
  root->Element.setId("app")
  root->Element.appendChild(body)
})
->ignore

Answer 3

由于 re-script 由 React (JSX) 提供支持，而不是标准的 ECMA JavaScript，我认为你不能使用像document.createElement.

相反，您应该通过以下方式创建元素：

let element = <h1> {React.string("Hello World")} </h1>

这转换为以下内容：

var element = React.createElement("h1", undefined, "Hello World");

---

我修改了默认的 Playground 脚本：

module Button = {
  @react.component
  let make = (~count: int) => {
    let times = switch count {
    | 1 => "once"
    | 2 => "twice"
    | n => Belt.Int.toString(n) ++ " times"
    }
    let msg = "Click me " ++ times
    let element = <button> {React.string(msg)} </button>
    element
  }
}