如何在导航栏中使用ReactJS编写上标

Question

我是一个新的ReactJS和尝试一个简单的门户页面，卡在一个点。如何在导航栏文件中写上标。

我正在重用现有的项目，需要一种方法来写上标的文本。

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

如何得到像Test Page ^ abc这样的结果(abc应该是power)

Answer 1

您可以直接使用supHTML元素，或者将文本包装在另一个元素中并使用vertical-align: super规则

使用原生HTML元素

<span>
Test Page
<sup>abc</sup>
</span>

使用CSS

<span>
Test Page
<span style={{ verticalAlign: "super" }}>abc</sup>
</span>