Rescript-react：创建一个隐藏的 canvas 元素

Question

我正在创建一个简单的 React 应用程序 (HTML)，它允许用户浏览到本地电脑上的图像，然后将其显示在图像标签中。我想获取一个 data-url 并动态创建一个隐藏的 canvas 标签（对不同的方法开放，但我想调整图像的大小，而不是在显示图像的标签上设置大小限制）。这是我的调整大小代码

MyComponent.res（违规代码）

let resize = dataUrl => {
    let canvas = React.createElement(_ => React.string("canvas"), {"style": "display: none;"})
    canvas.getContext("2d");
    dataUrl
}

错误

  We've found a bug for you!
  /Users/n0321437/projects/rescript-react/from-local-template/src/Upload.res:14:12-21

  12 │     let canvas = React.createElement(_ => React.string("canvas"), {"sty
     │ le": "display: none;"})
  13 │     //let myCanvas = canvas([React.null])
  14 │     canvas.getContext("2d");
  15 │     dataUrl
  16 │ }

找不到记录字段getContext。

我没有找到很多关于使用 createElement 或 createElementVariadic 的文档或帖子 - 所以我在这里猜测。看起来 createElement returns 是一个 element 类型的对象，但没有关联的方法：

React.res

type element
external createElement: (component<'props>, 'props) => element = "createElement"

所以我想有几个问题

实际上我是否创建了一个元素来表示 Canvas 的 HTML 对象？
如果我这样做了，我该如何调用该代码的方法？
如果我还没有，我该如何创建一个隐藏的 Canvas 对象？
最后，人们如何浏览文档和来源以自行发现这一点？

Answer 1

React 是一个库，它提供声明式 API，用于通过虚拟 DOM 创建、插入和更新 DOM。 React.createElement 是用于创建虚拟 DOM 元素的内部 API。

您似乎想要创建一个实际的 DOM 元素，然后不要将其插入 DOM。 React 并非设计用于执行此操作。

相反，您想要的是绑定到 DOM API，如果您只需要它的一些功能，您可以自己制作它，或者您可以使用完整的 DOM 绑定，例如 rescript-webapi，它还方便地包含 Canvas.

的绑定

这就是创建 canvas 元素的方式：

open Webapi.Dom

let canvas = document->Document.createElement("canvas")

然后获取您要使用的 canvas 上下文：

open Webapi.Canvas
let context = canvas->CanvasElement.getContext2d

然后使用Canvas2d中的函数做你想做的：

let image = context->Canvas2d.createImageDataCoords(~width=100, ~height=100)
...
context->Canvas2d.putImage(image, ~dx=0, ~dy=0)

Rescript-react：创建一个隐藏的 canvas 元素

Rescript-react: Creating a hidden canvas element

reactjs

createelement

rescript