使用JSX在ReactJS中使用或类似标签

Question

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

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

这就是我试图到目前为止显示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>

我很惊讶地看到它渲染。

Answer 1

如果希望将该代码用作文字块，则需要使用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的工作量很大”，是的。因此，通常您不必自己动手做；如果使用捆绑程序，则使用预处理器（如果使用的是webpack， 则使用块加载器）；如果不使用捆绑程序，则通常使用特殊的react组件来逐字逐句地渲染文本。