如何将 JSX 标签呈现为文本？答案

【问题标题】：How can I render JSX tags as text?如何将 JSX 标签呈现为文本？
【发布时间】：2020-01-08 23:13:25
【问题描述】：

对我的投资组合有一个想法，我会将我的姓氏包装在 JSX 组件标签中 - JOE - 标签作为跨度内的普通旧段落文本，然后是样式。但是这些标签显然被我的代码编辑器解释为 JSX 标签，而不是文本，从而引发错误。

有谁知道将标签包裹起来的元素，将它们呈现为文本？尝试了一些东西，但无法弄清楚。

<h1> JOE <span className='neon'> < </span> BLOGGS <span className='neon'> /> </span> </h1>

【问题讨论】：

您能出示您的代码吗？
html entities 不适合你吗？
嗨 thorntj85，欢迎来到堆栈溢出。只是想把它放在这里，以解决您未来的任何问题，我希望它对您有长期的帮助How to create a Minimal, Reproducible Example
这能回答你的问题吗？ How to show html entity using React?

【解决方案1】：

要将 HTML 标记呈现为文本，您可以使用 HTML entities。将&lt; 替换为&lt;，将&gt; 替换为&gt;：

<h1> JOE <span className='neon'> &lt; </span> BLOGGS <span className='neon'> /&gt; </span> </h1>

【讨论】：

【解决方案2】：

你可以尝试用花括号 {} 包裹它，这表示它是一个 JavaScript 表达式

  <h1> JOE <span className='neon'> {'<'} </span> BLOGGS <span className='neon'> {'/>'} </span> </h1>

【讨论】：

【解决方案3】：

您可以尝试{'/>'} 将字符显示为文本

【讨论】：

【解决方案4】：

您可以直接使用{'<'}、{'>'} 作为表达式或HTML 实体&lt;

【讨论】：