3 approches pour intégrer React aux éléments personnalisés

Les composants Web, avec leur portabilité et leur compatibilité des navigateurs, offrent des avantages convaincants aux développeurs Web, en particulier dans les grandes organisations visant des expériences utilisateur cohérentes dans divers cadres. Cependant, une idée fausse commune existe qui réagit, une bibliothèque frontale de premier plan, ne s'intègre pas bien aux composants Web. Cet article dissipe ce mythe en démontrant des techniques d'intégration transparentes.

Bien que la compatibilité de React avec les composants Web puisse être améliorée, la prétention d'une mauvaise intégration est inexacte. Nous explorerons les meilleures pratiques et limitations, créant des emballages et des pragas JSX personnalisés pour atteindre un couplage plus strict entre les éléments personnalisés et la réaction.

Intégration des composants React et Web: trois approches

Considérez React comme un livre de coloriage - nous explorerons les moyens d'intégrer efficacement les éléments personnalisés tout en adhérant à la structure de React. Nous utiliserons un élément personnalisé simple (construit avec Litelement pour la facilité, mais adaptable aux éléments personnalisés) qui attache une entrée de texte à l'ombre DOM et émet un événement sur les modifications de valeur. Cet élément, bien que de base, illustre efficacement les techniques d'intégration applicables aux composants plus complexes.

Approche 1: Utiliser ref

La documentation de React suggère d'utiliser ref pour accéder aux API impératives des composants Web. Ceci est nécessaire car le système SyntheTiceTevent de React et l'accès déclaratif DOM Les éléments diffèrent des événements DOM natifs.

Nous utilisons le crochet useRef de React pour référence à l'élément DOM natif, useEffect et useState pour accéder et rendre la valeur de l'entrée, et le ref d'appeler les méthodes de l'élément personnalisé. Surtout, le blocage useEffect gère soigneusement les auditeurs d'événements pour éviter les fuites de mémoire:

 useEFFECT (() => {
  coolInput.current.adDeventListener ('Custom-Input', EventListener);
  return () => {
    coolInput.current.reMoveEventListener («Custom-Input», EventListener);
  };
});

Cette approche fonctionne, mais elle est verbeuse et ne se sent pas intrinsèquement "comme une réaction".

Approche 2: employer un composant en wrapper

La création d'un composant React Wrapper simplifie l'interaction. Cet emballage gère la ref , ajoute / supprime les auditeurs d'événements et fournit une API pour accéder aux parties d'élément non accessibles à réaction. Un accessoire, onCustomInput , déclenche un rappel à partir du composant parent, incluant éventuellement la valeur actuelle de ref .

 fonction coolInput (accessoires) {
  const ref = useRef ();
  const {enfants, onCustomInput, ... rest} = accessoires;

  fonction invokeCallback (événement) {
    if (onCustomInput) {
      onCustomInput (événement, réf.current);
    }
  }

  useEFFECT (() => {
    const {current} = ref;
    current.adDeventListener ('Custom-Input', invokECallback);
    return () => {
      current.RemoveEventListener («Custom-Input», invokECallback);
    };
  });

  retour<super-cool-input ref="{ref}"> {enfants}</super-cool-input> ;
}

Cette méthode, ainsi que des emballages génériques comme reactifyLitElement , rationalisent l'intégration.

Approche 3: Tiration de JSX Pragmas

JSX Pragmas offre une autre solution. En importation de jsx-native-events , nous ajoutons un type d'hélice qui attache des écouteurs d'événements. Le préfixe onEvent déclenche l'ajout de l'auditeur d'événements. Cela nécessite un /** @jsx<pragma_name> */</pragma_name> Commentaire pour invoquer le pragma.

Pour la liaison de la propriété native au lieu des accessoires React, react-bind-properties peut être utilisé.

Le code du Pragma est disponible sur GitHub.

Perspectives futures

Alors que React 17 prévoyait initialement une amélioration de la compatibilité des éléments personnalisés, ces améliorations semblent retardées jusqu'à la version 18. Jusque-là, un travail supplémentaire est requis pour l'intégration complète des éléments personnalisés avec React. Espérons que les futures versions React combleront cette lacune plus efficacement.

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!