React で DOM 要素にアクセスする

1. React の getElementById() の代替
2. React 機能コンポーネントの参照
3. React クラス コンポーネントの参照

React は JavaScript ベースのフレームワークですが、仮想 DOM で動作します。 React API は、ネイティブ JavaScript とは異なるメソッドとプロパティで構成されています。

Web アプリケーションを構築するとき、開発者はよく Document.getElementById() メソッドを使用します。 このメソッドは、id を指定し、特定の HTML 要素を操作できます。

React の getElementById() の代替

React には、ネイティブ JavaScript インターフェースの上に構築された独自のルールとシステム層があります。 React で特定の DOM ノードにアクセスするには、Document.getElementById() メソッドを使用する代わりに refs を使用する必要があります。

Refs は、入力要素に入力された値の取得、フォーカス時の要素の外観の制御、アニメーションの再生など、さまざまな目的に使用できます。

それでも、デフォルトでは、React はアプリケーションの UI を構築するための宣言型アプローチに従います。 Refs はこのアプローチの例外であるため、例外的な場合にのみ使用する必要があります。

React 機能コンポーネントの参照

React v16.8 でフックが導入されて以来、開発者は機能コンポーネントで refs を作成できます。 useRef フックはコア React ライブラリからインポートできます。

この例を見てみましょう。

import "./styles.css";
import { useRef } from "react";
export default function App() {
  const header = useRef(null);
  console.log(header);

  return (
    <div className="App">
      <h1 ref={header}>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

header 変数を null 値を持つ ref に初期化します。

JSX では、<h1> 要素の ref 属性をこの変数に設定します。 次に、変数を console.log() します。この ライブ デモ でコンソールを確認すると、変数には <h1> DOM ノードを表す値が含まれています。

React クラス コンポーネントの参照

React 開発者は、Class 構文を使用してコンポーネントを作成することもできます。 この例では、前の例の機能コンポーネントと同じことを行うコンポーネントがあります。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.header = React.createRef();
  }
  render() {
      return <h1 ref={this.header}>Hello CodeSandbox</h1>;
  }
}

主な違いは構文です。 React.createRef() メソッドを使用して ref を設定します。