Rescript react:创建隐藏的画布元素

Question

我正在创建一个简单的反应应用程序(HTML)，允许用户浏览到本地pc上的图像，然后将其显示在图像标记中。我想要获取一个数据-url并动态创建一个隐藏的画布标记(对另一种方法开放，但我希望调整图像的大小，而不是在显示图像的标记上设置大小限制)。这是我的调整代码

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返回一个类型为element的对象，但没有关联的方法：

React.res

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

所以我想有几个问题

实际上，我是否创建了一个元素来表示画布的object?

• FInally对象？

1. ，如果我已经这样做了，我如何在代码上调用方法?如果没有，如何创建隐藏的画布
2. ？如何导航文档和源代码来发现它们自己？

Answer 1

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

您似乎想要的是创建一个实际的DOM元素，然后不要将它插入到DOM中。React并不是为了这样做的。

相反，您想要的是绑定到DOM，如果您只需要它的几个特性，就可以将其绑定起来，或者您可以使用一组完整的DOM绑定，比如rescript-webapi，它还方便地包括了Canvas的绑定。

下面是如何创建一个canvas元素：

open Webapi.Dom

let canvas = document->Document.createElement("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)