React中如何为a标签的href动态添加电话号码？

要实现电话号码动态同步到tel:链接中，核心是让电话号码成为单一数据源，避免重复硬编码，下面是几种实用方案：

方案1：使用共享常量 #

把电话号码提取为全局或组件内的常量，两处都引用这个值：

// 定义共享的电话号码
const PHONE_NUMBER = "123-456-7890";

const PhoneNumber = () => {
  return <div>{PHONE_NUMBER}</div>;
};

// 在a标签中使用
<a href={`tel:${PHONE_NUMBER}`} title="Phone Number" className="transition">
  <PhoneNumber />
</a>

方案2：通过Props传递号码 #

让PhoneNumber组件接收外部传入的号码，适配更多灵活场景：

// 改造PhoneNumber组件，接受number属性
const PhoneNumber = ({ number }) => {
  return <div>{number}</div>;
};

// 父组件中定义号码并传递
const phoneNumber = "123-456-7890";

<a href={`tel:${phoneNumber}`} title="Phone Number" className="transition">
  <PhoneNumber number={phoneNumber} />
</a>

方案3：处理动态获取的号码（如API请求） #

如果电话号码是从后端接口获取的，结合useState和useEffect实现：

import { useState, useEffect } from 'react';

const PhoneNumber = ({ number }) => {
  return <div>{number}</div>;
};

const ContactSection = () => {
  const [phoneNumber, setPhoneNumber] = useState("");

  // 模拟从API获取号码
  useEffect(() => {
    // 替换为实际的API请求逻辑
    const fetchPhoneNumber = async () => {
      const res = await fetch('/api/contact');
      const data = await res.json();
      setPhoneNumber(data.phone);
    };
    fetchPhoneNumber();
  }, []);

  // 确保号码存在后再渲染
  return phoneNumber ? (
    <a href={`tel:${phoneNumber}`} title="Phone Number" className="transition">
      <PhoneNumber number={phoneNumber} />
    </a>
  ) : null;
};

以上方案都能保证a标签的href和PhoneNumber组件显示的内容完全一致，避免出现号码不一致的问题。

内容的提问来源于stack exchange，提问作者Nazar Kardan