LabEx
LoginBeitreten

Erstellen einer React Email Link Komponente

Beginner

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

Einführung

In diesem Lab werden wir lernen, wie man in React eine Email Link-Komponente erstellt, die einen Link generiert, der für das Senden einer E-Mail formatiert ist. Diese Komponente wird das mailto:-Linkformat verwenden und akzeptiert Props für den E-Mail-Empfänger, den E-Mail-Betreff und den E-Mail-Inhalt. Wir werden auch lernen, wie man den E-Mail-Betreff und den E-Mail-Inhalt mithilfe von encodeURIComponent sicher codiert.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 96% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

index.html und script.js wurden bereits in der virtuellen Maschine (VM) bereitgestellt. Im Allgemeinen müssen Sie nur Code in script.js und style.css hinzufügen.

Diese Funktion erstellt einen Link, der beim Klicken den E-Mail-Client des Benutzers öffnet und eine neue E-Mail mit einem angegebenen Betreff und Inhalt füllt. Der Link wird mithilfe des mailto:-Protokolls formatiert.

Um die Funktion zu verwenden, geben Sie einen email-Prop mit der E-Mail-Adresse des Empfängers an und optional subject- und body-Props, um die E-Mail mit einem Anfangsinhalt zu füllen. Diese Props werden mithilfe von encodeURIComponent sicher codiert, bevor sie zur Link-URL hinzugefügt werden.

Der Link wird mit den bereitgestellten children als Inhalt gerendert.

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

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

Beispiel für die Verwendung:

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

Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Web-Service auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzusehen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Email Link Lab abgeschlossen. Sie können in LabEx weitere Labs üben, um Ihre Fähigkeiten zu verbessern.