我正在尝试使用带有 JSX 的 ReactJS 来创建样式指南的概念证明。
我希望能够显示如何调用组件的原始 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>
我很惊讶地看到它渲染。
在您的示例中，react 将您的代码解释为 JSX。您需要使用 JSX 保存编码。最简单的方法是包含一个字符串文字：
<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。
如果您希望该代码作为文字块，则需要使用 JSX 安全字符，因此要么 JSX 转义所有内容，要么尽可能使用 HTML 实体，然后您仍然需要 JSX 转义大括号（因为那些是JSX 中的模板语法）和换行符（是的，这些换行符也不是 JSX 安全的。空白在 JSX 转换期间折叠）。
并且您可能想要使用 a <pre>，它是用于格式化文本的块级元素，而不是<code>内联的 ：
<pre>
<VideoPlayer{'\n'}
ref="videoplayer"{'\n'}
preload={'{'}this.props.preload{'}\n'}
classes={'{'}this.props.classes{'}\n'}
videoID={'{'}this.props.videoID{'}\n'}
controls="controls"{'\n'}
/></pre>
“这么多工作O_o”，是的。所以通常你不会费心自己做这件事；如果您使用捆绑器，则使用预处理器（如果您使用 webpack，则使用块加载器），或者如果您不使用，则经常使用特殊的 react 组件来逐字呈现文本。