如何在 ReScript 中执行 document.createElement

问题描述

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

如何调用 document.createElement() 之类的函数？

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

在 Js 中找不到值 document
在 Dom 中找不到值 document

解决方法

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

由于 re-script 由 React (JSX) 而非标准 ECMA JavaScript 提供支持，我认为您不能使用 document.createElement 之类的调用。

相反，您应该create the element通过：

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

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

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

createElement("div")

这将被转换为

window.document.createElement('div');

对于快速原型设计，您也可以仅使用 external 并直接与 RS Objects 等对象交互：

@val external document: 'a = "document"

document["createElement"]("div")

查看 interop cheatsheet 和 docs for external 以了解更常见的模式。

javascript reason reason rescript