如何在next-share的EmailShareButton组件中实现邮件文本加粗

问题出在你把JSX元素（<bold>）和字符串直接拼接，JSX本质是对象，转为字符串后就变成了[object Object]。要解决这个问题，需要将加粗标签以纯HTML字符串的形式拼接，而不是用JSX语法。

修正后的代码示例 #

使用模板字符串更简洁清晰：

const body = `
<strong>${job.title}</strong>

${job?.description.replace(/<[^>]*>?/gm, '').replace('&nbsp;', ' ').slice(0, 100)}...
`;

如果习惯用字符串拼接写法：

const body = 
    '<strong>' + job.title + '</strong>\n\n' + 
    job?.description.replace(/<[^>]*>?/gm, '').replace('&nbsp;', ' ').slice(0, 100) + '...\n\n';

关键说明 #

1. 改用HTML原生的<strong>标签（比<bold>语义更规范），并以字符串形式包裹，而非JSX元素
2. 确保body是纯字符串类型，因为next-share的EmailShareButton的body参数接收的是字符串，用于构造mailto链接的内容
3. 多数主流邮件客户端支持解析mailto链接中的HTML格式内容，加粗效果会正常渲染

内容的提问来源于stack exchange，提问作者Teik Cheah