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

Question

我正在尝试将 ReactJS 与 JSX 结合使用来创建样式指南的概念验证。

我希望能够显示如何调用组件执行此操作的原始 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

如果你想将该代码作为文字块，你需要使用 JSX-safe 个字符，所以要么 JSX-escape 一切，要么尽可能使用 HTML 个实体，然后你仍然需要 JSX-escape 大括号（因为它们是 JSX 中的模板语法）和换行符（是的，这些换行符也不是 JSX-safe。在 JSX 转换过程中空白被折叠）。

您可能想使用 <pre>，它是格式化文本的 block-level 元素，而不是内联的 <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>

"That's so much work O_o"，是的。所以通常你不会费心自己做这件事；如果您使用捆绑器，则使用预处理器（例如 block-loader 如果您使用的是 webpack），或者如果您不使用，则经常使用特殊的反应组件来逐字呈现文本。

Answer 2

在您的示例中，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.

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

Use <code> or similar tags in ReactJS using JSX

html

reactjs

react-jsx

blockquote