LabEx
EntrarJunte-se

Criar Componente de Link de E-mail em React

Beginner

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

Introdução

Neste laboratório, aprenderemos como criar um componente Email Link em React que gera um link formatado para enviar um e-mail. Este componente usará o formato de link mailto: e aceitará props para o destinatário do e-mail, assunto do e-mail e corpo do e-mail. Também aprenderemos como codificar com segurança o assunto e o corpo do e-mail usando encodeURIComponent.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 96%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

index.html e script.js já foram fornecidos na VM. Em geral, você só precisa adicionar código a script.js e style.css.

Esta função cria um link que, quando clicado, abre o cliente de e-mail do usuário e preenche um novo e-mail com o assunto e o conteúdo do corpo especificados. O link é formatado usando o protocolo mailto:.

Para usar a função, forneça uma prop email com o endereço de e-mail do destinatário e, opcionalmente, forneça as props subject e body para preencher o e-mail com o conteúdo inicial. Essas props são codificadas com segurança usando encodeURIComponent antes de serem adicionadas à URL do link.

O link é renderizado com os children fornecidos como seu conteúdo.

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

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

Exemplo de uso:

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

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório Email Link. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.