Реагировать на визуализацию внутри веб-компонента трафарета - PullRequest
Новая
       64

Реагировать на визуализацию внутри веб-компонента трафарета

0 голосов
/ 19 апреля 2019

Это, вероятно, немного сложнее - я хочу визуализировать React внутри веб-компонента, подготовленного с помощью Stencil, но я получаю 'Контейнер Invariant Violation: Target не является элементом 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>
    );
  }
}

1 Ответ

0 голосов
/ 20 июня 2019

Вы можете использовать декоратор @ 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, чем с кодом.

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

...