Html 使用<；代码>；或者使用JSX在ReactJS中使用类似的标记

我试图将ReactJS与JSX结合使用，为styleguide创建概念证明

我希望能够显示如何调用执行此操作的组件的原始html。JSX正在忽略我的

标记并呈现出组件

这就是我迄今为止所尝试的





我很惊讶地看到它呈现出来
 如果希望将代码作为文本块，则需要使用JSX安全字符，因此要么JSX转义所有内容，要么尽可能使用HTML实体，然后仍然需要JSX转义花括号（因为这些是JSX中的模板语法）和换行符（是的，这些换行符也不是JSX安全的。在JSX转换期间，空格被折叠）

您可能想使用

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


“这是太多的工作了”，是的。所以通常你不需要自己动手；如果你使用捆绑程序，你就需要使用预处理器（就像你在使用webpack一样），或者如果您不经常使用特殊的react组件逐字呈现文本。
在您的示例中，react将代码解释为JSX。您需要使用JSX保存编码。最简单的方法是包含字符串文字：

完成您的元素

---

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

这里有什么问题？@HenrikAndersson如何公开jsx标记，使其不呈现组件并仅显示标记。这将允许其他人看到如何实现组件标记

除了更改字体样式之外，不应该做任何事情，即使你尝试在JSX之外使用它，它不会呈现标签，只呈现文本。我想你需要一个外部库来呈现代码，就像你在github中看到的那样。非常感谢。你的朋友。这是我尝试快速破解的概念证明。你刚刚为我节省了几个小时的时间！！！！
<pre>{`
  <VideoPlayer 
    ref="videoplayer" 
    preload={this.props.preload} 
    classes={this.props.classes} 
    videoID={this.props.videoID}
    controls="controls" 
  />
`}</pre>