カスタム要素を使用して反応アプリの接続

反応文書とWebコンポーネントはcomplementary to each other . 反応コンポーネントをカスタム要素にラップし、いくつかの小道具をHTML属性として送信し、click イベント.
私はあなたが反応について知っていると仮定し、カスタム要素を使用する方法を知りたいだけです.

カスタム要素を定義する
Webコンポーネントを定義するには、カスタムタグをコンポーネントの動作をラップするクラスと関連付ける必要があります.

window.customElements.define('my-element', MyElement);

その後、クラスはHTMLElement クラス.
💡 組み込みのタグを拡張する場合p , あなたはHTMLParagraphElement 代わりに.

反応成分
さて、我々は反応の世界の中にコンポーネントが必要です.

const App = ({text = 'The button wasn\'t pressed yet.', children, onClick}) => {
  const [date] = useState(new Date());
  return (
    <div>
      This is a custom element, created at {date.toString()}
      <br/>
      {text}
      <br/>
      <button onClick={onClick}>Click me!</button>
      <br/>
      {children}
    </div>
  );
};

我々はいくつかの反応機能をテストするつもりですchildren , プロップと、コンポーネントが再現されているかどうかをテストする日付定数.

要素のクラスの定義
私たちはShadowRoot このコンポーネントのグローバルなCSSからJavaScriptとCSSをカプセル化するために我々の反応するコンポーネントのために、これは必要ではありませんが、それはお勧めです.
また、要素自体のレンダリングからコンストラクターを分離するのも良いです.

class MyElement extends HTMLElement {
  shadow;

  constructor() {
    // Always call super first in constructor
    super();

    this.shadow = this.attachShadow({mode: 'open'});
    // Write element functionality in here
    this.renderElement();
  }

  renderElement() {
    const onClick = this.getAttribute('onclick')
    const text = this.hasAttribute('text')
      ? this.getAttribute('text')
      : undefined;
    ReactDOM.render(
      <App text={text} onClick={onClick}>
        <slot />
      </App>,
      this.shadow
    );
  }

  // ...
}

にrenderElement HTMLタグの属性から値をとりますonclick and text , しかし、何が野生ですか <slot /> ある?
The slot 要素は、自分のマークアップを埋めるWebコンポーネント内のプレースホルダーです.似ているdangerouslySetInnerHTML . 🙈
💡 あなたは数を使用することができますslot Webコンポーネントのname 属性.
🧠 を返します.slot を使うchildren プロップ

カスタム要素のライフサイクル
反応コンポーネントのように、カスタム要素クラス内の特定のメソッドを定義することができます.私たちは最も重要な2つを見るつもりです.

カスタム要素をアンマウントする
私たちはdisconnectedCallback コンポーネントがドキュメントのDOMから切断されたときに知られています.

新しい小道具を外部に受け取る
我々は再レンダリングする必要があります🙀 我々のカスタム要素のために新しい値を受け取るならば、我々の反応成分.我々にはattributeChangedCallback いくつかの値を変更するときにお知らせください.
まず、コンポーネントのオブザーバブル属性の配列を定義し、カスタム要素を再描画できます.

class MyElement extends HTMLElement {
  static get observedAttributes() {
    return ['text', 'onclick'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`The attribute ${name} was updated.`);
    this.renderElement();
  }

  // ...
}

を、これは本当に簡単に見えます.🤔 我々は、属性値を毎回renderElement と呼ばれるので、私たちはそれを呼び出す必要がありますReactDOM.render() APIはコンポーネントを再レンダリングし、差分を計算します.🍰

結論
今、私たちは、HTMLとJavaScriptを使用して近代的で軽量なウェブサイトを作成することができますが、複雑なUIのものをプラグインでは、カスタム要素のインターフェイスを使用して反応した、またはサードパーティの反応パッケージは、我々が必要な場合.我々は両方の世界のベストを使用しています.🎸
ここではガイドがありますCustom Element Best Practices グーグルから以下に例を示します:

navarroaxel / howto-connect-react-custom-element
レスポンスコンポーネントをWebコンポーネントにラップする方法
カスタム・エレメント
反応文書とWebコンポーネントはcomplementary to each other . 反応コンポーネントをカスタム要素にラップし、いくつかの小道具をHTML属性として送信し、click イベント.
私はあなたが反応について知っていると仮定し、カスタム要素を使用する方法を知りたいだけです.
カスタム要素を定義する
Webコンポーネントを定義するには、カスタムタグをコンポーネントの動作をラップするクラスと関連付ける必要があります.
ウィンドウ.カスタム要素.を定義する
その後、クラスはHTMLElement クラス.
💡 組み込みのタグを拡張する場合p , あなたはHTMLParagraphElement 代わりに.
反応成分
さて、我々は反応の世界の中にコンポーネントが必要です.
const app =({ text ='ボタンはまだ押されていません)
コンスト.
View on GitHub