html - 利用 or similar tags in ReactJS using JSX

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>

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

解析完您的代码后，最后的反引号切换回 JavaScript 模式，以下}切换回 JSX 模式并</pre>完成您的元素。

React 会自动将你的字符串转换成安全的 HTML。

Answer 2

如果您希望将该代码作为文字块，则需要使用 JSX 安全字符，因此要么 JSX 转义所有内容，要么尽可能使用 HTML 实体，然后您仍然需要 JSX 转义大括号（因为那些是JSX 中的模板语法）和换行符（是的，这些换行符也不是 JSX 安全的。在 JSX 转换期间空格被折叠）。

而且您可能想要使用 a <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，则使用块加载器），或者如果您不使用，则经常使用特殊的反应组件来逐字呈现文本。