ReactでDOM要素を参照する方法

ReactでDOM要素を参照する方法をご覧ください

Reactは、アプリを構築するときにDOMを抽象化するのに優れています。

しかし、Reactコンポーネントが表すDOM要素にアクセスしたい場合はどうでしょうか?

チャートライブラリのようにDOMと直接対話するライブラリを追加する必要があるかもしれませんし、DOM APIを呼び出すか、要素にフォーカスを追加する必要があるかもしれません。

理由が何であれ、DOMに直接アクセスせずに他の方法がないことを確認することをお勧めします。

コンポーネントのJSXでは、次の属性を使用して、DOM要素の参照をコンポーネントプロパティに割り当てることができます。

ref={el => this.someProperty = el}

これをコンテキストに入れます。たとえば、button素子:

<button ref={el => (this.button = el)} />

buttonコンポーネントのプロパティを参照します。これは、コンポーネントのライフサイクルメソッド(または他のメソッド)がDOMと対話するために使用できます。

class SomeComponent extends Component {
  render() {
    return <button ref={el => (this.button = el)} />
  }
}

関数コンポーネントでは、メカニズムは同じです。使用を避けるだけです。this(コンポーネントインスタンスを指していないため)代わりにプロパティを使用します。

function SomeComponent() {
  let button
  return <button ref={el => (button = el)} />
}

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: