Добавление потомков в div после начальной загрузки в Stenciljs

Question

Я очень новичок в Stencil js, и моя задача - создать виртуализированную таблицу как веб-компонент в Stencil js. Подход, которым я придерживаюсь, заключается в том, чтобы сначала создать строки div, но при этом они хотят заполнить их узлами data / child после получения данных. Данные могут быть вызовом API. Мне было интересно, есть ли способ динамически добавлять jsx к html узлам с помощью appendChild или что-то подобное. Было бы здорово, если бы я мог получить какой-либо пример или ссылку.

Answer 1

Вы не можете реально использовать JSX во время выполнения (потому что он преобразуется в вызовы h), но вы можете передать данные в свой компонент в качестве подпорки и затем позволить функции рендеринга динамически генерировать из нее JSX (потому что тогда c части будут также перенесены). Очень упрощенный пример:

export class MyTableComponent {
  @Prop() data: string[][];

  render() {
    return (
      <table>
        {data.map(row => (
          <tr>
            {row.map(col => <td>{col}</td>)}
          </tr>
        )}
      </table>
    );
  }
}

В качестве альтернативы вы можете использовать метод класса, используя декоратор @Method, который принимает некоторые данные в качестве реквизита и добавляет что-то к вашему компоненту.