stenciljs - StencilJS 中的 TSX

Question

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

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

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

Answer 3

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

编译后的版本只是带有您选择的标签和 DOM 上的模板的组件。

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