Javascript 如何在ReScript中执行document.createElement

ReScript似乎是编写JS代码的更好方法，但我找不到一行简单的文档

如何调用像

document.createElement（）

这样的函数

通过查看以下页面，我尝试了Js.document、Dom.document，但该代码给出了一个错误：

在Js中找不到值

文档

。
在Dom中找不到值

文档

---

由于re-script是由React（JSX）支持的，而不是标准的ECMA-JavaScript，所以我认为您不能使用像

document.createElement

这样的调用

相反，您应该通过：

---

我修改了默认的游乐场脚本：

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

模块按钮={
@反应组件
让make=（~count:int）=>{
让时间=开关计数{
|1=>“一次”
|2=>“两次”
|n=>Belt.Int.toString（n）+“次”
}
让msg=“单击我”++次
let元素={React.string（msg）}
要素
}
}

要调用JS函数，您需要使用ReScript。在这种情况下，您可以使用

external

关键字和

@val

/

@scope

属性来获取重新编写函数，该函数将在调用时调用

document.createElement

：

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

createElement("div")

这将转变为

window.document.createElement（'div'）；

对于快速原型，您也可以只使用

外部

，直接与对象（如RS对象）交互：

@val external document: 'a = "document"

document["createElement"]("div")

查看和以了解更常见的模式。

您可以使用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

---

React.createElement与document.createElement不等效，甚至不接近。正如我所提到的，我试图在JS中使用ReScript，而不是在React项目中。我遵循了上面的建议，使用了

外部

。我已经将

createElement

的返回值正确地键入为

Dom.element

，但是我无法访问Mozilla上提到的outerHTML之类的属性。你能告诉我我做错了什么吗？代码是。ReScript提供了Dom模块作为一组常见的不透明类型，供低级UI库使用；正如上面所说，它们不提供任何实际功能。如果您希望强制与DOM交互，那么需要用JS编写大部分实际代码，然后公开几个入口点进行重新编写（这就是

DOM

不透明类型的作用，以确保您的RS代码通过预期的值类型）。正如@mr Polywhill提到的，阻力最小的方法是使用现有的lib-like React。@vinay deshmukh，你需要理解几个不同的概念，然后才能理解你在这里做错了什么。堆栈溢出不是进行这种讨论的好地方。我强烈建议在ReScript论坛上提出这个问题，在那里人们可以进行更广泛的讨论：。最后，如果您只是想立即开始使用某些东西，请尝试

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