Реагировать на рендеринг внутри веб-компонента Stencil

Это, вероятно, немного сложно - я хочу визуализировать React внутри веб-компонента, подготовленного с помощью Stencil, но получаю сообщение «Неизменяемое нарушение: целевой контейнер не является элементом DOM».:

import { Component, Prop } from "@stencil/core";
import { format } from "../../utils/utils";
import ReactDOM from 'react-dom';
import React from "react";
import { LikeButton } from './../LikeButton';

const e = React.createElement;

@Component({
  tag: "my-component",
  styleUrl: "my-component.css",
  shadow: true
})
export class MyComponent {
  @Prop() first: string;
  @Prop() middle: string;
  @Prop() last: string;

  private getText(): string {
    return format(this.first, this.middle, this.last);
  }

  componentWillLoad() {
    console.log("here i am - the React render");
    const domContainer = document.querySelector("#like_button_container");
    ReactDOM.render(e(LikeButton), domContainer);
  }

  render() {
    return (
      <div>
        Hello, World! I'm {this.getText()}{" "}
        <div id="like_button_container">React container</div>
      </div>
    );
  }
}

reactjs react-dom web-component stenciljs html-templates
person mikes    schedule 18.04.2019    source источник
comment
Возможный дубликат Неизменяемое нарушение: _registerComponent (...) : Целевой контейнер не является элементом DOM   -  person Danny '365CSI' Engelman    schedule 19.04.2019

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать декоратор @Element () и использовать его для запроса domContainer элемент под shadowRoot. shadowRoot необходимо с @Element() в этом случае, потому что для shadow установлено значение true:

import { Component, Element, Prop } from "@stencil/core";
import { format } from "../../utils/utils";
import ReactDOM from 'react-dom';
import React from "react";
import { LikeButton } from './../LikeButton';

const e = React.createElement;

@Component({
  tag: "my-component",
  styleUrl: "my-component.css",
  shadow: true
})
export class MyComponent {
  @Element() el: HTMLElement;
  @Prop() first: string;
  @Prop() middle: string;
  @Prop() last: string;

  private getText(): string {
    return format(this.first, this.middle, this.last);
  }

  componentWillLoad() {
    const domContainer = this.el.shadowRoot.querySelector("#like_button_container");
    ReactDOM.render(e(LikeButton), domContainer);
  }

  render() {
    return (
      <div>
        Hello, World! I'm {this.getText()}{" "}
        <div id="like_button_container">React container</div>
      </div>
    );
  }
}

У меня периодически возникали проблемы при запуске этого в режиме разработки stenciljs. При обновлении страницы у меня возникла проблема, возможно, из-за кеша, но если я инициировал перезагрузку, сохранив файл компонента stenciljs, содержащий этот код, это обычно работало. Это может быть больше связано с stencil-dev-server, чем с кодом.

Надеюсь, это поможет!

person Alexander Staroselsky    schedule 20.06.2019