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

ReactReactBeginner
Практиковаться сейчас

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

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react/FundamentalsGroup -.-> react/jsx("JSX") subgraph Lab Skills react/jsx -.-> lab-38342{{"Вызываемая телефонная ссылка"}} end

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

В ВМ уже предоставлены 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, чтобы повысить свои навыки.