Ref を使用して特定の React 要素を直接操作するにはどうすればよいですか?

特定の React 要素で操作を実行する方法

React で DOM 要素を操作するとき、特定の要素を選択して操作する必要があることがよくあります。ユーザーインターフェイスを操作します。この場合の目標は、ユーザーの選択に基づいてプログレス バー コンポーネントを更新することです。

Ref を使用するコードをリファクタリングします

React で DOM 要素にアクセスするには、「」の概念を利用できます。参照。」 Ref は、コンポーネント ツリー内の特定の要素への参照を作成するメカニズムを提供し、そのプロパティとメソッドへの直接アクセスを可能にします。

React 16.8 (関数コンポーネント):

// Define the ref for the child component
const ChildRef = useRef(null);

// Forward the ref to the child component with React.forwardRef()
const Child = React.forwardRef((props, ref) => {
  // Receive and store the forwarded ref in useRef()
  ChildRef.current = ref;
  
  return <div>Child Component</div>;
});

React 16.3 内 (クラスコンポーネント):

// Create a ref for the component instance
this.myRef = React.createRef();

// Pass the ref to the element within the render method
render() {
  return <div ref={this.myRef} />;
}

参照要素へのアクセス:

参照が確立されたら、次を使用して DOM 要素にアクセスできます:

const element = this.myRef.current;

選択した項目に対して操作を実行要素

目的の要素にアクセスすると、必要な操作を実行できるようになります。この場合、addPrecent 関数を実行して、進行状況バーの完了率を更新したいと考えています。

document.getElementById(this.state.baction).addPrecent(10);

従来のメソッド (非推奨)

DOM 要素にアクセスする従来のメソッドには、文字列参照の使用が含まれます。またはコールバック参照:

文字列参照:

<Progressbar completed={25}>

コールバック参照:

<Progressbar completed={25}>

ただし、これらのメソッドは潜在的な問題があるため推奨されず、将来削除される可能性があります。 React バージョン。

ref を組み込むことで、特定の DOM 要素を効果的に選択して操作できるようになり、 React アプリケーションの対話性と柔軟性。

以上がRef を使用して特定の React 要素を直接操作するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。