简介
在本实验中,我们将学习如何使用 tel:
协议在 React 中创建一个可调用的电话链接。此链接允许用户只需点击一下,即可直接从其设备拨打电话号码。在本实验结束时,你将能够在自己的 React 应用程序中实现此功能,从而提高其可用性和可访问性。
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版
在本实验中,我们将学习如何使用 tel:
协议在 React 中创建一个可调用的电话链接。此链接允许用户只需点击一下,即可直接从其设备拨打电话号码。在本实验结束时,你将能够在自己的 React 应用程序中实现此功能,从而提高其可用性和可访问性。
虚拟机中已提供
index.html
和script.js
。一般来说,你只需在script.js
和style.css
中添加代码。
要创建一个用于拨打电话号码的链接,请使用 Callto
组件。此组件会创建一个带有适当 href
属性的 <a>
元素。要渲染该链接,请使用 phone
属性指定电话号码,并使用 children
属性指定链接文本。
const Callto = ({ phone, children }) => {
return <a href={`tel:${phone}`}>{children}</a>;
};
要使用 Callto
组件,请调用 ReactDOM.render()
方法,并传入设置了 phone
和 children
属性的 Callto
元素。
ReactDOM.render(
<Callto phone="+302101234567">Call me!</Callto>,
document.getElementById("root")
);
请点击右下角的“上线”以在端口 8080 上运行网络服务。然后,你可以刷新“Web 8080”标签页来预览网页。
恭喜你!你已完成“可调用电话链接”实验。你可以在 LabEx 中练习更多实验以提升你的技能。