Erstellen einer React Email Link Komponente

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.

E-Mail-Link

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="[email protected]" 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.