Question

对于以下JavaScript代码，如何在ReasonML中编写它？

class HelloWorld extends HTMLElement {
  constructor() {
    super();
    // Attach a shadow root to the element.
    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `<p>hello world</p>`;
  }
}

我找不到有关使用ReasonML编写类的任何文档吗？我无法使用普通对象/类型，因为我需要从不适用于ES style classes的HTMLElement类扩展。

我研究了这个existing question - How to extend JS class in ReasonML，但这是另一回事。要编写Web组件，我们需要扩展HTMLElement，并且必须使用new关键字来调用它。 ES5样式扩展机制不起作用。

Answer 1

不能。至少并非直接如此，因为BuckleScript（Reason用来编译为JavaScript）针对的是ES5，因此不了解ES6类。

幸运的是，ES6-类不需要特殊的运行时支持，而是仅作为语法糖实现，这就是为什么您可以将ES6转换为ES5的原因，如链接到的问题所示。然后，您真正要做的就是将转换后的输出转换为ReasonML：

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var BaseElement = (function (_super) {
    __extends(BaseElement, _super);
    function BaseElement() {
        _super.call(this);
    }
    return BaseElement;
}(HTMLElement));

根据您实际需要的特定类功能，可以对它进行一些简化。

如何在ReasonML中为Web组件扩展JavaScript HTMLElement类？

1 个答案: