Maîtrisez le modal, les info-bulles et plus encore avec React createPortal

la création de modaux et d'info-bulles dans React était souvent complexe, difficile à styliser et conduisait à de nombreuses erreurs de style.
L'API createPortal simplifie ce processus en permettant de restituer des composants en dehors du DOM principal, ce qui facilite le style et la maintenabilité. Dans cet article, nous apprendrons comment utiliser cet outil pour créer des modaux et des info-bulles de la bonne manière dans React.

Comprendre l'API createPortal

createPortal est une fonction intégrée de React qui vous permet de restituer des composants dans différentes parties du DOM. Et c'est particulièrement utile pour créer : des modaux et des superpositions, des composants tiers et des éléments d'interface utilisateur personnalisés.

Comment ça marche

Un portail est utilisé dans l'instruction return du composant et il modifie uniquement l'emplacement physique du nœud DOM. c'est comme téléporter un nœud DOM en dehors de l'arborescence DOM principale. L'API createPortal accède à deux paramètres et un troisième facultatif :

• Enfants : tout ce qui peut être rendu avec React, un div, un composant ou un fragment React.
• domNode : qui est l'emplacement des enfants à placer.
• clé (facultatif) : un numéro ou une chaîne unique à utiliser comme clé de portail.

Si nous supposons que nous créons un portail dans le composant A et le rendons dans le composant B, les enfants du portail accéderont à tous les états et variables du composant A et fonctionneront tels qu'ils sont dans le composant A pendant qu'ils ont été rendus dans le composant B.

Création et utilisation du portail

Dans l'exemple ci-dessous, le portail est utilisé pour téléporter le composant Enfant qui accepte un état et déplacer ce composant vers le corps.

import { createPortal } from 'react-dom'

const App = () => {
  const [state, setState] = useState()

  return(
    <div>
      <p> ... </p>
      createPoratl(
        <child state="{state}"></child>,
        document.body
      )
    </div>
  )
}

export default App

Maintenant, le composant enfant sera rendu dans les balises body en HTML.

Conclusion

createPortal est un outil précieux dans React pour créer des modaux, des info-bulles et d'autres composants qui doivent être rendus en dehors de l'arborescence DOM principale. en utilisant cet outil, vous pouvez obtenir une approche plus propre, plus flexible et plus efficace de ces éléments.

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!