Question

I am trying to use ReactJS with JSX to create a proof of concept for a styleguide.

I wanted to be able to display the raw html of how to call on components doing this. JSX is ignoring my <code> tags and rendering out the component

This is what i have tried so far Display HTML code in HTML

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

I was surprised to see it render.

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>

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

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

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

Answer 2

如果你想要那个代码作为文字块，你需要使用JSX安全字符，所以要么JSX-escape所有内容，要么尽可能使用HTML实体，然后你仍然需要JSX-escape卷曲括号（因为这些是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>

＆＃34;那么多的工作O_o＆＃34;，是的。所以通常你自己也不愿意这样做;如果您使用捆绑器，则使用预处理器（如果您正在使用webpack，则使用block-loader），或者如果您不经常使用可逐字呈现文本的特殊反应组件。

使用<code> or similar tags in ReactJS using JSX

2 个答案: