Comment manipuler directement des éléments React spécifiques à l'aide de références ?

Comment exécuter une opération sur un élément React spécifique

Lorsque vous travaillez avec des éléments DOM dans React, il est courant de rencontrer le besoin de sélectionner et d'opérer sur des éléments spécifiques pour manipuler l'interface utilisateur. Dans ce cas, l'objectif est de mettre à jour un composant de barre de progression en fonction de la sélection d'un utilisateur.

Refactor Code to Use Refs

Pour accéder aux éléments DOM dans React, nous pouvons utiliser le concept de " réf.". Les références fournissent un mécanisme pour créer une référence à un élément particulier dans l'arborescence des composants, permettant un accès direct à ses propriétés et méthodes.

Dans React 16.8 (composants de fonction) :

// 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>;
});

Dans React 16.3 (Classe Composants) :

// 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} />;
}

Accéder à l'élément référencé :

Une fois la référence établie, nous pouvons accéder à l'élément DOM en utilisant :

const element = this.myRef.current;

Effectuer une opération sur l'élément sélectionné

Avec accès à l'élément souhaité, vous pouvez maintenant effectuer l'opération requise. Dans votre cas, vous souhaitez exécuter la fonction addPrecent pour mettre à jour le pourcentage d'achèvement de la barre de progression.

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

Méthodes héritées (non recommandées)

Les méthodes héritées pour accéder aux éléments DOM incluent l'utilisation de références de chaîne ou références de rappel :

Chaîne Réfs :

<Progressbar completed={25}>

Réfs de rappel :

<Progressbar completed={25}>

Cependant, ces méthodes sont déconseillées en raison de problèmes potentiels et sont susceptibles d'être supprimées à l'avenir. Versions React.

En incorporant des références, vous pouvez sélectionner et opérer efficacement sur des éléments DOM spécifiques, améliorant ainsi l'efficacité de votre application React. interactivité et flexibilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!