LabEx
EntrerRejoindre

Créer un composant Email Link en React

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire (lab), nous allons apprendre à créer un composant Email Link en React qui génère un lien formaté pour envoyer un e-mail. Ce composant utilisera le format de lien mailto: et acceptera des props pour le destinataire de l'e-mail, l'objet de l'e-mail et le corps de l'e-mail. Nous allons également apprendre à encoder en toute sécurité l'objet et le corps de l'e-mail à l'aide de encodeURIComponent.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 96%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

index.html et script.js ont déjà été fournis dans la machine virtuelle (VM). En général, vous n'avez qu'à ajouter du code à script.js et style.css.

Cette fonction crée un lien qui, lorsqu'il est cliqué, ouvre le client de messagerie de l'utilisateur et remplit un nouvel e-mail avec le sujet et le contenu du corps spécifiés. Le lien est formaté à l'aide du protocole mailto:.

Pour utiliser la fonction, fournissez une prop email avec l'adresse e-mail du destinataire, et éventuellement des props subject et body pour remplir l'e-mail avec un contenu initial. Ces props sont encodées en toute sécurité à l'aide de encodeURIComponent avant d'être ajoutées à l'URL du lien.

Le lien est rendu avec le contenu fourni dans children.

const Mailto = ({ email, subject = "", body = "", children }) => {
  const params =
    subject || body
      ? `?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(
          body
        )}`
      : "";

  return <a href={`mailto:${email}${params}`}>{children}</a>;
};

Exemple d'utilisation :

ReactDOM.createRoot(document.getElementById("root")).render(
  <Mailto email="foo@bar.baz" subject="Hello & Welcome" body="Hello world!">
    Mail me!
  </Mailto>
);

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Summary

Félicitations! Vous avez terminé le laboratoire (lab) Email Link. Vous pouvez pratiquer davantage de laboratoires sur LabEx pour améliorer vos compétences.