如何在ReactJS导航栏中实现文本上标效果

方案1：直接修改配置支持JSX（改造成本最低） #

原生HTML的<sup>标签天然支持上标格式，你可以直接把配置项的text字段从纯字符串改成React节点类型：

export const navHeader = { 
  text: <>Test Page<sup>abc</sup></>, 
  href: "/" 
};

原有导航栏的渲染逻辑不需要做任何修改，直接渲染text字段即可，React会自动识别并渲染JSX节点。

方案2：保留纯字符串配置，渲染时解析 #

如果项目规范要求navHeader的text必须为字符串类型，可以先约定上标的标记规则，比如用^标记上标起始位置，再在渲染层做解析处理：

1. 首先修改配置添加标记：

export const navHeader = { 
  text: "Test Page^abc", 
  href: "/" 
};

2. 在导航栏渲染组件中添加解析逻辑：

// 文本解析函数
const formatNavText = (text) => {
  if (!text.includes('^')) return text;
  const [mainText, supText] = text.split('^');
  return (
    <>
      {mainText}
      <sup>{supText}</sup>
    </>
  );
};

// 渲染时调用
<a href={navHeader.href}>
  {formatNavText(navHeader.text)}
</a>

注意事项 #

• 优先使用<sup>标签实现上标，语义化程度更高，也符合无障碍访问规范，不推荐用CSS的vertical-align: super属性强行模拟效果。
• 如果你用React Router的Link组件代替原生a标签，渲染逻辑完全一致，仅需要把href属性替换为to即可。

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