React で DOM 要素を選択する

ある時点で、すべての JavaScript 開発者は getElementById() メソッドを使用しました。1つの引数 id を取り、その ID を持つ HTML 要素を返します。この方法は、手動の DOM ミューテーションを行う場合に非常に役立ちます。

HTML 要素ノードを取得することは一般的な必要性です。JavaScript の経験はあるが、React フレームワークを初めて使用する多くの開発者は、React でこの操作を実行する方法を知りたいと考えています。

React の Ref

参照の略である Ref は、React で DOM にアクセスする簡単な方法です。要素（またはコンポーネント）を参照にリンクするには、要素に参照と等しい ref 属性が必要です。サンプルの <div> 要素は、<div ref={this.testRef}></div> のように testRef にリンクできます。ref インスタンスを変数に格納することをお勧めします。

機能コンポーネントで

約 2 年前にフックが導入されて以来、機能コンポーネントははるかに堅牢になっています。最新バージョンの React（16.8.0 など）を実行している場合は、参照を定義するために使用できる useRef() フックをインポートできます。レンダリング中にランダム変数を参照する機能コンポーネントの例を次に示します。

function App() {
    const elementVariable = useRef(null)
    useEffect(() => console.log(elementVariable), [] )
    return (
        <div ref={elementVariable}>
           <h1></h1> 
        </div>
    )
}

この例では、elementVariable を useRef() フックのインスタンスと等しく設定することにより、HTML ノードを変数に格納しています。

HTML 要素の変数名に ref 属性が設定されていない限り、フックは機能しません。

useRef() フックに渡される 1つの引数は、ref インスタンスの初期値を指定します。<div></div> 要素がマウントされると、変数は HTML ノード値を保持します。コンソールは次のようになります。

クラスコンポーネント内

長い間、クラスコンポーネントを使用することは、インタラクティブな React コンポーネントを作成するためのデフォルトの方法でした。

バージョン 16.3 のリリース以降、React 開発者は React.createRef() を使用して参照を作成できます。API は異なる場合がありますが、React.createRef() と useRef() フックの両方が本質的に同じ ref インスタンスを作成します。

クラスコンポーネントでは、ref インスタンスはクラスプロパティに格納されます。次に例を示します。

class App extends Component {
  constructor(props){
    super(props)
    this.ref = React.createRef()
  }
  componentDidMount(){
    console.log(this.ref);
  }
  render() {
    return <h1 ref={this.ref}>Referenced Text</h1>;
  }
}

コンソールを見ると、HTML ノードを含む current プロパティを持つオブジェクトが表示されます。

React バージョン> 16.3 を使用している開発者は、参照を作成するためにわずかに異なる構文を使用する必要があります。例：

<div ref={(element) => this.ref = element}></div>

この方法で作成された参照は、コールバック ref と呼ばれます。これは、HTML 要素を引数として取り、この値をクラスインスタンスの ref プロパティに割り当てるコールバック関数に ref 属性を設定するためです。