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

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

所以答案就是：

{{1}}

......等等。我想你可以明白这一点。

模板转换为vanillaJS，它对如何声明Web组件有一些定义。而且因为它们使用起来很糟糕，所以模板可以为你提供一个很好的语法，所以你不必这样做。

Answer 2

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

编译版本它只是包含您选择的标记和DOM上的模板的组件。

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

Answer 3

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