Блог

Главная - Вопросы по программированию - Трафарет js: обновление элемента DOM вне компонента

Трафарет js: обновление элемента DOM вне компонента

#stenciljs

Вопрос:

Я нахожусь в процессе переноса некоторых устаревших страниц в веб-компоненты с помощью StencilJS, поэтому я нахожусь в ситуации, когда некоторые элементы уже обрабатываются с помощью StencilJS, некоторые-нет, и перенос всего займет довольно много времени.

В этом контексте мне нужно иметь возможность обновлять содержимое целевого div, не управляемого с помощью StencilJS, из компонента StencilJS. Этот div находится в совершенно другой ветви DOM, и его невозможно переместить в компонент, не переосмыслив всю страницу.

Поэтому из моего компонента мне нужно уметь делать что-то подобное:

 render() {
  const target = document.getElementById(this.targetDiv);
  if (target) {
    target.innerHTML = jsxToString(this.renderDivContents()) // obviously this doesn't work
  }
}

renderDivContents() {
    return (<p>Some JSX stuff</p>)
}

Итак, другими словами, мне нужно немедленно скомпилировать шаблон JSX в строку. Я не уверен, как это сделать с помощью StencilJS и возможно ли это вообще. У меня сложилось впечатление, что есть способ достичь этого, потому что он очень похож на то, что мы делаем в тестах, но все ресурсы, которые я нахожу по этой теме, предназначены для JSX с React и на самом деле не помогают с StencilJS

Если это неправильный подход, что вы предлагаете? Я знаю, что введение HTML в элемент DOM не идеально, но я просто пытаюсь найти временное решение, чтобы иметь возможность постепенно вносить изменения.

PS: Я знаю, что также могу использовать подход наложения (создать div в компоненте и придать ему ту же позицию и размер, что и целевому div), но это звучит еще уродливее, чем innerHTML. Это не тот ответ, которого я ожидаю.

Комментарии:

1. Я нашел решение, я создаю содержимое в скрытом div внутри компонента, а затем просто копирую его в целевой div, при componentDidUpdate этом мне все еще любопытно, можно ли преобразовать шаблон JSX в строку

2. Просто идея: вы могли бы делать все, что вы делаете renderDivContents в компоненте трафарета, а затем использовать манипуляции DOM для вставки вашего компонента в целевой элемент, например. document.querySelector('#target-div').appendChild('my-component') …

3. Что касается вашего вопроса о превращении шаблона JSX в строку, это нелегко сделать, потому что JSX превращается в кучу вложенных h(...) вызовов. Afaik превратить его в строку можно было бы только в том случае, если бы он был во время сборки, что и будет делать рендеринг на стороне сервера. Однако я не уверен, что там что-то открыто как общедоступный API.

Метки: