React.js中根据nav变量切换a标签内容为文本或图标问题求助

你的问题出在把HTML标签以字符串形式直接插值，框架（比如Vue）的{{}}插值会把内容解析为纯文本，不会将字符串转换成DOM元素，所以才会显示字面的<span class="material-symbols-outlined"> home </span>文本，而非图标。

推荐解决方案：使用条件渲染直接写元素 #

这种方式更直观且安全，避免字符串拼接HTML的问题：

<a href="/">
  <template v-if="nav">HOME</template>
  <span v-else class="material-symbols-outlined">home</span>
</a>

备选方案：使用v-html解析HTML字符串（需注意XSS风险） #

如果一定要用三元表达式，可以通过v-html指令让框架解析字符串为HTML：

<a href="/" v-html="nav ? 'HOME' : '<span class=\"material-symbols-outlined\">home</span>'"></a>

注意：v-html会直接渲染HTML内容，如果内容来自用户输入，存在XSS攻击风险，静态内容可放心使用。

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