TSX в StencilJS

Question

Что такое скомпилированная версия этого кода.tsx в StencilJS?

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

В Реакте есть:

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

Есть ли в StencilJS эквивалент "React.createElement"?

Answer 1

Я думаю, вы должны взглянуть на основные "как создать веб-компонент" Может быть здесь: https://www.webcomponents.org/introduction

Таким образом, ответ будет что-то вроде:

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

... и так далее. Я думаю, вы можете понять суть.

Трафарет переносится в vanillaJS, у которого есть некоторые определения, как объявлять веб-компоненты. И поскольку с ними было бы ужасно работать, трафарет дает вам хороший синтаксис, так что вам не нужно.

Answer 2

Да , вы можете проверить tsconfig для фабрики JSX, трафарет использует функцию h(), поэтому в основном это та же структура, но вместо React.createElement она имеет только h().

Answer 3

Прежде всего, этот метод предназначен только для целей рендеринга (шаблон компонента, такой как ReactJS).

Скомпилированная версия - это просто компонент с выбранным вами тегом и этот шаблон в DOM.

Надеюсь, что это поможет вам, в любом случае вы можете перейти на сайт StencilJS, чтобы прочитать документы.