Reactガイドを読んでいくその124

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

React で Web Components を使用する

WebComponentsで公開されているAPIを使うためにrefを使う。
サードパーティ製のコンポーネントを使う場合はWebComponentsのラッパーとしてReactのコンポーネントを作成するとよい。
WebComponentを使う場合Reactのレンダーツリーをうまく経由できていないことがあるのでReact内で適切なハンドラを作ってあげる必要がある。

class HelloMessage extends React.Component {
  render() {
    return <div>Hello <x-search>{this.props.name}</x-search>!</div>;
  }
}

ありがちなミスとしてWeb Componentsがclassnameの代わりにclassを使っているケースがある。

function BrickFlipbox() {
  return (
    <brick-flipbox class="wana">
      <div>front</div>
      <div>back</div>
    </brick-flipbox>
  );
}

今日はここまで