如何实现React Bootstrap按钮点击拨打指定电话号码功能？

直接利用React Bootstrap Button组件的href属性就能实现点击拨号，无需使用路由Link组件（Link是单页应用内部路由跳转用的，拨号属于原生浏览器的tel协议跳转场景）。

具体实现代码 #

import Button from 'react-bootstrap/Button';

// 在组件中使用
<Button href="tel:+12-345-678-89089" variant="primary">
  +12-345-678-89089
</Button>

自定义样式说明 #

如果需要保留你原来的自定义样式，直接给Button添加className属性即可：

<Button href="tel:+12-345-678-89089" className="link-phone-no">
  +12-345-678-89089
</Button>

这种写法既保留了React Bootstrap按钮的原生样式与交互，又能让浏览器识别tel协议，移动端点击会唤起拨号界面，桌面端则会触发对应的拨号提示操作。

内容的提问来源于stack exchange，提问作者Praveen Kumar T