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

Question

我正在尝试使用ReactJS和JSX为样式指南创建概念证明.

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

我很惊讶地看到它渲染.

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-escape所有内容,要么尽可能使用HTML实体,然后你仍然需要JSX-escape大括号(因为那些是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时使用块加载器),或者如果不使用,则使用特殊的反应组件,逐字呈现文本.