在React中如何为sms协议href传递含动态描述与商品链接的短信内容？

问题原因 #

你之前的写法存在三个核心错误：

• 动态参数拼接时漏了body后的等号，参数识别失效
• 动态的描述和商品URL没有做URL编码，特殊字符会破坏链接结构
• 模板字符串中不需要写HTML实体&，直接使用&即可

最简正确实现 #

直接对动态内容做编码后拼接即可：

<a 
  href={`sms:?body=${encodeURIComponent(`${description} ${url}`)}`} 
  className="social-link"
>
  <FontAwesome name="share" />
</a>

如果需要预设收件号码，改成sms:01134?body=xxx格式即可。

更稳妥的可维护写法 #

用URLSearchParams自动处理参数编码，避免手动拼接出错：

// 组件逻辑部分组装参数
const smsContent = `${description} ${url}`
const smsQuery = new URLSearchParams({ body: smsContent })
const smsLink = `sms:?${smsQuery.toString()}`

// 渲染部分
<a href={smsLink} className="social-link">
  <FontAwesome name="share" />
</a>

兼容性说明 #

• 目前主流iOS、安卓设备均支持上述写法，旧版本iOS如需兼容可将参数分隔符&替换为;
• 不需要预设收件人时不要填号码，用户点击后可自主选择联系人
• React-share确实没有内置短信分享能力，该场景直接调用系统短信URI Scheme即可，无需额外依赖

内容的提问来源于stack exchange，提问作者CC Horton