React で DOM 要素を選択するにはどうすればよいですか? React の document.getElementById() に相当するものは何ですか

React では、バニラ JavaScript での作業とは異なり、DOM 要素に直接アクセスするのが異なります。 React は仮想 DOM を使用して実際の DOM を効率的に更新します。これにより、バニラ JavaScript とは異なります。

DOM 要素にアクセスする方法

オプション 1: Refs を使用する

• 関数コンポーネントで Ref を使用する:(v16.8.0) を使用するuseRefとforwardRef。 useRef を使用して参照を定義し、forwardRef を使用してそれを DOM 要素に転送します。要素にアクセスするには、ref (ref.current) の current プロパティを使用します。

オプション 2: React.createRef を使用する (v16.3 )

• React.createRef() を使用して ref を作成し、後でアクセスできるように要素にアタッチします。 ref.current を使用して DOM ノードを取得します。

オプション 3: コールバック パターンの使用 (レガシー)

• JSX で ref 属性を定義します。要素を指定し、DOM 要素への参照を受け取るコールバック関数を渡します。

オプション 4:文字列参照の使用 (レガシー)

• 文字列参照を使用するには、ref 属性を DOM 要素を識別する文字列に設定します。 this.refs.[stringRef].

Example

を使用して要素にアクセスします。以下は、コールバック パターンを使用して DOM 要素を選択する例です。

  render() {
    return (
      

        
要素にアクセスするには、this.progressBars[0]、this.progressBars[1]、および this.progressBars[2] を使用して要素に対する操作を実行できます。