可调用电话链接：增强 React 中的可用性和可访问性

简介

在本实验中，我们将学习如何使用 tel: 协议在 React 中创建一个可调用的电话链接。此链接允许用户只需点击一下，即可直接从其设备拨打电话号码。在本实验结束时，你将能够在自己的 React 应用程序中实现此功能，从而提高其可用性和可访问性。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 94%。获得了学习者 100% 的好评率。

虚拟机中已提供 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 中练习更多实验以提升你的技能。