ReactでDOM要素にアクセスする方法とdocument.getElementById()の等価物

Reactでは、直接DOM要素にアクセスするのではなく、JSXを使用して仮想DOMを操作します。これにより、効率的なレンダリングとパフォーマンスの最適化を実現できます。

ReactにおけるDOM要素へのアクセス方法

1. 参照 (Ref):

   • ref属性を使用して、コンポーネント内のDOM要素への参照を取得します。
   • 参照を取得したら、その要素のプロパティやメソッドにアクセスできます。

   import React, { useRef } from 'react';
   
   function MyComponent() {
     const myRef = useRef(null);
   
     return (
       <div ref={myRef}>
         {/* ... */}
       </div>
     );
   }
   

2. 子コンポーネントへのプロップ渡し:

   • 親コンポーネントから子コンポーネントにDOM要素への参照をプロップとして渡します。
   • 子コンポーネントで参照を使用して、必要な操作を行います。

   // Parent component
   import React, { useRef } from 'react';
   import ChildComponent from './ChildComponent';
   
   function ParentComponent() {
     const myRef = useRef(null);
   
     return (
       <div ref={myRef}>
         <ChildComponent ref={myRef} />
       </div>
     );
   }
   
   // Child component
   import React from 'react';
   
   function ChildComponent({ ref }) {
     return (
       <div ref={ref}>
         {/* ... */}
       </div>
     );
   }
   

document.getElementById()の等価物

Reactでは、直接DOM要素にアクセスする代わりに、参照を使用して間接的にアクセスします。そのため、document.getElementById()に直接対応する機能はありません。

ただし、参照を使用して、特定のDOM要素をターゲットにすることができます。たとえば、ref属性を指定した<div>要素にアクセスし、その要素のIDやクラス名に基づいて操作することができます。

ReactにおけるDOM要素アクセスとgetElementByIdの例

参照 (Ref)を使用したDOM要素へのアクセス

import React, { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);

  return (
    <div ref={myRef}>
      {/* ... */}
    </div>
  );
}

• useRefフック: 参照を管理するためのフックです。
• myRef: 参照を格納する変数です。

// Parent component
import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const myRef = useRef(null);

  return (
    <div ref={myRef}>
      <ChildComponent ref={myRef} />
    </div>
  );
}

// Child component
import React from 'react';

function ChildComponent({ ref }) {
  return (
    <div ref={ref}>
      {/* ... */}
    </div>
  );
}

• 子コンポーネント: プロップとして受け取った参照を使用して、DOM要素にアクセスします。

参照の使用例

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return (
    <input ref={myRef} type="text" />
  );
}

• useEffectフック: コンポーネントがマウントされたときに、参照を使用して入力要素にフォーカスを設定します。

• document.getElementById(): ブラウザのDOMに直接アクセスし、IDに基づいて要素を取得します。
• Reactの参照: コンポーネント内のDOM要素への参照を取得し、間接的にアクセスします。

useRefフックによる参照の使用

最も一般的な方法は、useRefフックを使用して参照を取得することです。これにより、コンポーネント内のDOM要素への参照を管理できます。

import React, { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);

  return (
    <div ref={myRef}>
      {/* ... */}
    </div>
  );
}

親コンポーネントから子コンポーネントに参照をプロップとして渡し、子コンポーネントで参照を使用してDOM要素にアクセスすることもできます。

// Parent component
import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const myRef = useRef(null);

  return (
    <div ref={myRef}>
      <ChildComponent ref={myRef} />
    </div>
  );
}

// Child component
import React from 'react';

function ChildComponent({ ref }) {
  return (
    <div ref={ref}>
      {/* ... */}
    </div>
  );
}

ReactDOM.findDOMNode (非推奨)

ReactDOM.findDOMNodeは、コンポーネントのルートDOMノードを取得するためのメソッドです。ただし、このメソッドは非推奨となっており、新しいコードでは使用すべきではありません。

import ReactDOM from 'react-dom';

function MyComponent() {
  return <div>Hello, world!</div>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);

const domNode = ReactDOM.findDOMNode(root);
console.log(domNode);

querySelectorやquerySelectorAll

これらのブラウザのDOM APIを使用して、特定のセレクタに基づいてDOM要素を取得することもできます。ただし、Reactコンポーネント内で直接使用することは推奨されません。

const element = document.querySelector('.my-element');