Вызываемая телефонная ссылка: повысьте удобство использования и доступность в React

Введение

В этом практическом занятии мы научимся создавать вызываемую телефонную ссылку в React с использованием протокола tel:. Эта ссылка позволяет пользователям вызывать номер телефона непосредственно с их устройства за один клик. В конце этого практического занятия вы сможете внедрить эту функцию в свои собственные React-приложения, повысив их удобство использования и доступность.

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

Вызываемая телефонная ссылка

В ВМ уже предоставлены index.html и script.js. В общем случае вам нужно только добавлять код в script.js и style.css.

Для создания ссылки, которая вызывает номер телефона, используйте компонент Callto. Этот компонент создает элемент <a> с соответствующим атрибутом href. Чтобы отрендерить ссылку, укажите номер телефона с помощью свойства phone, а текст ссылки — с помощью свойства children.

const Callto = ({ phone, children }) => {
  return <a href={`tel:${phone}`}>{children}</a>;
};

Для использования компонента Callto вызовите метод ReactDOM.render() и передайте в него элемент Callto с установленными свойствами phone и children.

ReactDOM.render(
  <Callto phone="+302101234567">Call me!</Callto>,
  document.getElementById("root")
);

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

Резюме

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