LabEx
EntrarÚnete

Crear un componente de enlace de correo electrónico en React

Beginner

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

Introducción

En este laboratorio, aprenderemos cómo crear un componente Email Link en React que genere un enlace con formato para enviar un correo electrónico. Este componente utilizará el formato de enlace mailto: y aceptará propiedades para el destinatario del correo electrónico, el asunto del correo electrónico y el cuerpo del correo electrónico. También aprenderemos cómo codificar de forma segura el asunto y el cuerpo del correo electrónico utilizando encodeURIComponent.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 96%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

index.html y script.js ya se han proporcionado en la máquina virtual (VM). En general, solo necesitas agregar código a script.js y style.css.

Esta función crea un enlace que, cuando se hace clic en él, abre el cliente de correo electrónico del usuario y rellena un nuevo correo electrónico con el asunto y el contenido del cuerpo especificados. El enlace se formatea utilizando el protocolo mailto:.

Para utilizar la función, proporciona una propiedad email con la dirección de correo electrónico del destinatario, y opcionalmente, proporciona las propiedades subject y body para rellenar el correo electrónico con contenido inicial. Estas propiedades se codifican de forma segura utilizando encodeURIComponent antes de agregarlas a la URL del enlace.

El enlace se renderiza con el contenido proporcionado en 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>;
};

Ejemplo de uso:

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

Haz clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puedes actualizar la pestaña Web 8080 para ver una vista previa de la página web.

Resumen

¡Felicidades! Has completado el laboratorio (lab) de Email Link. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.