LabEx
ВходРегистрация

Создание компонента ссылки для отправки электронной почты в React

Beginner

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

Введение

В этом практическом занятии (лабораторной работе) мы научимся создавать компонент Email Link в React, который генерирует ссылку, форматированную для отправки электронного письма. Этот компонент будет использовать формат ссылки mailto: и будет принимать пропсы (props) для получателя письма, темы письма и текста письма. Мы также научимся безопасно кодировать тему и текст письма с использованием encodeURIComponent.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 96%. Он получил 100% положительных отзывов от учащихся.

Ссылка для отправки электронной почты

Файлы index.html и script.js уже предоставлены в виртуальной машине (VM). Как правило, вам нужно добавить код только в файлы script.js и style.css.

Эта функция создает ссылку, при нажатии на которую открывается почтовый клиент пользователя и заполняется новое письмо с указанной темой и текстом. Ссылка форматируется с использованием протокола mailto:.

Для использования функции укажите пропс (prop) email с адресом электронной почты получателя и, по желанию, укажите пропсы subject и body для заполнения письма начальным содержимым. Эти пропсы безопасно кодируются с использованием encodeURIComponent перед добавлением в URL ссылки.

Ссылка отображается с предоставленным содержимым 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>;
};

Пример использования:

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

Нажмите на кнопку 'Go Live' в правом нижнем углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы предварительно просмотреть веб-страницу.

Итог

Поздравляем! Вы завершили практическое занятие (лабораторную работу) по созданию ссылки для отправки электронной почты. Вы можете попрактиковаться в выполнении других практических занятий в LabEx, чтобы улучшить свои навыки.