在使用JSX编写ReactJS时，使用<code>或类似标签。

Question

我正在尝试使用ReactJS和JSX创建样式指南的概念验证。

我希望能够显示如何调用组件的原始HTML代码。但是JSX忽略了我的<code>标签并呈现出组件。

到目前为止，我尝试过以下方法：在HTML中显示HTML代码

<blockquote>
  <pre>
    <code>
      <VideoPlayer 
        ref="videoplayer" 
        preload={this.props.preload} 
        classes={this.props.classes} 
        videoID={this.props.videoID}
        controls="controls" 
      />     
    </code>
  </pre>
</blockquote>

我看到它被呈现出来感到惊讶。

- jackncoke

---

这里有什么问题？ - Henrik Andersson

@HenrikAndersson，我该如何公开JSX标记，以便它不会呈现组件，只显示标记。这将使其他人能够看到如何实现该组件。 - jackncoke

标签<code>只是用来改变字体样式的，即使你试图在JSX之外使用它，它也不会呈现标签，只会呈现文本。我认为你需要一个外部库来呈现像GitHub这样的代码。 - Eduardo Henrique

Answer 1

在你的例子中，React 将你的代码解析为 JSX。你需要使用 JSX 安全编码。最简单的方法是包含一个字符串文本：

<pre>{`
  <VideoPlayer 
    ref="videoplayer" 
    preload={this.props.preload} 
    classes={this.props.classes} 
    videoID={this.props.videoID}
    controls="controls" 
  />
`}</pre>

解释：在JSX模式下，解析输入从<pre>开始。开放括号{将解析器切换到JavaScript模式以将计算值包含到输出中。现在反引号`将解析器切换到字符串解析模式。它可以跨越多行。在字符串解析模式内，JSX特殊字符<>{}不再是特殊字符了。但是您必须转义多行字符串中的两个特殊字符：反引号`和美元符号$。

解析您的代码后，最终反引号会切换回JavaScript模式，下面的}切换回JSX模式，而</pre>则完成了您的元素。

React将自动将您的字符串转换为安全的HTML。

- Yaakov Belch

Answer 2

如果您想将该代码显示为文字块，则需要使用JSX安全字符，因此必须对所有内容进行JSX转义，或者在可能的情况下使用HTML实体，然后仍需对大括号（因为它们是JSX中的模板语法）和换行符（是的，这些换行符在JSX转换期间不是JSX安全的。空格在JSX转换期间被折叠）进行JSX转义。

而且，您可能需要使用<pre>元素，它是用于格式化文本的块级元素，而不是<code>元素，它是内联元素：

<pre>
  &lt;VideoPlayer{'\n'}
    ref="videoplayer"{'\n'}
    preload={'{'}this.props.preload{'}\n'}
    classes={'{'}this.props.classes{'}\n'}
    videoID={'{'}this.props.videoID{'}\n'}
    controls="controls"{'\n'}
  /&gt;</pre>

“那太多工作了 O_o”，是的确实如此。所以通常你不会自己费力去做这件事；如果你使用打包工具，你会使用一个预处理器（比如如果你使用 webpack，就可以使用像 block-loader 这样的预处理器），或者如果你不使用打包工具，你经常会使用一个特殊的 react 组件来逐字呈现文本。

- Mike 'Pomax' Kamermans

---

非常感谢您。你真棒。这是我试图迅速组合的一个概念验证。你刚刚为我节省了数小时的时间！！！ - jackncoke