Reactガイドを読んでいくその125
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
Web Components で React を使用する
参考コード
class XSearch extends HTMLElement { connectedCallback() { const mountPoint = document.createElement('span'); this.attachShadow({ mode: 'open' }).appendChild(mountPoint); const name = this.getAttribute('name'); const url = 'https://www.google.com/search?q=' + encodeURIComponent(name); // ここでReactDOMをつかってる ReactDOM.render(<a href={url}>{name}</a>, mountPoint); } } customElements.define('x-search', XSearch);
WebComponentとReactを使っている参考
組み合わせたときにどうデメリットがでるのかなぁというのは気になるところ。
今日はここまで