StencilJS 中的 TSX

Question

这个 .tsx 代码在 StencilJS 中的编译版本是什么？

render() {
  return (
    <div>
      <div>
        test
      </div>
    </div>
  );
}

在 React 中是：

React.createElement(
  "div",
  null,
  React.createElement(
    "div",
    null,
    "test"
  )
 );

StencilJS 中是否有“React.createElement”的等价物？

Answer 1

我想你必须看看基本的“如何创建一个 Web 组件” 也许在这里： https://www.webcomponents.org/introduction#how-do-i-define-a-new-html-element-

所以答案应该是这样的：

class SomeElement extends HTMLElement {...} window.customElements.define('some-element') var newElement = document.createElement('some-element')newElement.appendChild(document.createElement('div).appendChild(document.createElement('test')))

... 等等。我想你能明白这一点。

Stencil 转换为 vanillaJS，其中有一些关于如何声明 Web 组件的定义。而且因为它们很难使用，stencil 为您提供了一个很好的语法，所以您不必这样做。

Answer 2

是的，你可以检查 tsconfig 的 JSX 工厂，stencil 使用 h() 函数，所以基本上它是相同的结构，但它不是 React.createElement 它只有 h()。

Answer 3

首先，该方法仅用于渲染目的（ReactJS 等组件模板）。

编译后的版本就是带有你选择的标签的组件和 DOM 上的那个模板。

希望对你有帮助，无论如何你可以去StencilJS网站阅读文档。