React 明确不要在 html 内渲染组件

Question

How can I render a component inside a HTML <code> element just as a text?

<code>
  <DesktopHeader>
    <a href="/projects">Projects</a>
  </DesktopHeader>
</code>

在我的情况下，它会再次呈现我的组件，但我想在文档中使用它来展示如何将道具传递给组件。

Answer 1

This is not a perfect matchup for what you intend to do but you can escape your markups with &lt; for < , &gt; for > , &quot; for " (quotes), and also &nbsp; for (spaces).

所以它会变成这样：

 <code> &lt;DesktopHeader&gt;<br/> &nbsp;&nbsp;&lt;a href=&quot;/projects&quot;&gt;Projects&lt;/a&gt;<br/> &lt;/DesktopHeader&gt; </code>

注意：通常，UTF-8 代码大于 127 的每个字符在“正常”西方 ISO-8859-1 编码和 UTF-8 之间是不可互换的。 但是要创建 HTML 标记，知道这三个（ < 、 > 、  和" ）就足够了。 我还发现了一个对自动生成标记很有用的链接。