使用 JSX 在 ReactJS 中使用 <code> 或类似标签

Question

我正在尝试使用带有 JSX 的 ReactJS 来为样式指南创建概念证明。

我希望能够显示如何调用执行此操作的组件的原始 html。 JSX 忽略了我的 <code> 标签并渲染出组件

这是我迄今为止尝试过的 Display HTML code in HTML

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

看到它渲染我很惊讶。

Answer 1

在您的示例中，react 将您的代码解释为 JSX。您需要使用 JSX-save 编码。最简单的方法是包含一个字符串文字：

<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。

Answer 2

如果您希望该代码作为文字块，则需要使用 JSX 安全字符，因此要么 JSX 转义所有内容，要么尽可能使用 HTML 实体，然后您仍然需要 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”，是的。所以通常你不会费心自己做这件事；如果您使用捆绑器，则使用预处理器（如 block-loader，如果您使用的是 webpack），或者如果您不经常使用特殊的反应组件来逐字呈现文本。