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

Question

Had an idea for my portfolio, whereby I would wrap my surname in JSX component tags - JOE - with the tags as plain old paragraph text within spans, then style. But the tags are obviously being interpreted by my code editor as JSX tags, rather than text, throwing errors.

Does anyone know of an element that would wrap around the tags, rendering them as text? Tried a few things but can't figure it out.

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

Answer 1

To render HTML markup as text you can use HTML entities . Replace < with < and > with > :

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

Answer 2

您可以尝试将其包裹在花括号{} ，表示它是一个 JavaScript 表达式

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

Answer 3

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

Answer 4

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