React で DOM 要素を選択する方法: `document.getElementById()` の代替手段?

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 への参照を受け取るコールバック関数を渡します。 element.

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

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

例

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

  render() {
    return (
      <div>
        <progressbar completed="{25}"><p>要素にアクセスするには、this.progressBars[0]、this.progressBars[1]、およびthis.progressBars[2] で操作を実行します。</p></progressbar>
</div>

以上がReact で DOM 要素を選択する方法: `document.getElementById()` の代替手段?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。