React中为含商标符号的字符串部分加样式时出现[object object]问题

数据老陈

2026-8-12

React中为商标符号（™）添加样式的正确方法

你遇到的[object Object]问题，核心原因是：React元素本质是React.createElement返回的对象，把它放进模板字符串时会被强制转为字符串，结果就是[object Object]；而且ReactHtmlParser只能解析HTML字符串，无法处理React对象的字符串形式。

下面是两种可行的解决方法：

方法一：拆分字符串拼接React元素

适合处理单个或多个™的场景，直接生成React元素数组，无需转字符串和解析HTML：

const changeFormat = (item) => {
  // 按™拆分原字符串
  const parts = item?.name.split('™');
  // 遍历片段，拼接带样式的™元素
  return parts.map((part, index) => (
    index === parts.length - 1 
      ? part 
      : <>{part}<span style={{ border: '2px black solid' }}>™</span></>
  ));
}

// 注意组件名要大写，符合React规范
const Menu = () => {
  return (
    <Link>
      {item?.name.includes('™') ? changeFormat(item) : item?.name}
    </Link>
  );
}

方法二：正则匹配批量替换

如果字符串中有多个™，用正则拆分+合并的方式更稳妥：

const changeFormat = (item) => {
  const tmRegex = /™/g;
  // 拆分出不含™的文本片段
  const textParts = item?.name.split(tmRegex);
  // 获取所有匹配到的™
  const tmMatches = item?.name.match(tmRegex) || [];

  const result = [];
  textParts.forEach((part, index) => {
    result.push(part);
    // 为每个匹配到的™添加样式
    if (tmMatches[index]) {
      result.push(<span style={{ border: '2px black solid' }}>™</span>);
    }
  });
  return result;
}

const Menu = () => {
  return (
    <Link>
      {item?.name.includes('™') ? changeFormat(item) : item?.name}
    </Link>
  );
}