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

问题描述

我试图在JSX中使用ReactJS来为styleguide创建一个概念验证。

我希望能够显示如何调用组件的原始html。 JSX忽略我的< code> 标签并渲染出组件

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

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

我很惊讶地发现它。

解决方案

如果您想将该代码视为文字块，则需要使用JSX安全字符，所有东西，或者在你可以使用HTML实体的地方使用，然后你仍然需要JSX--大括号（因为它们是JSX中的模板语法）和换行符（是的，这些换行符不是JSX安全的）。转换）。

您可能想要使用< pre> ，这是一个块级元素对于格式化文本，而不是< code> ，这是内联：

 <预> 
& lt; VideoPlayer {'\\\
'} 
 ref =videoplayer{'\\\
'} 
 preload = {'{'} this.props.preload { } \\\
'} 
 classes = {'{'} this.props.classes {'} \ n'} 
 videoID = {'{'} this.props.videoID {'} \\ \\ n'} 
 controls =controls{'\\\
'} 
 /& gt;< / pre> 
  

O_o这么多工作，是的。所以通常你不会自己做这件事。如果您使用捆绑器，则可以使用预处理器（如，重新使用webpack），或者如果你不经常使用一个能够逐字呈现文本的特殊反应组件。

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.

解决方案

If you want that code as literal block, you'll need to use JSX-safe characters, so either JSX-escape everything, or use HTML entities where you can and then you still need to JSX-escape the curly brackets (because those are templating syntax in JSX) and newlines (yes, those newlines are not JSX-safe, either. Whitespace is collapsed during JSX transformation).

And you probably want to use a <pre>, which is a block-level element for formatted text, rather than <code>, which is inline:

<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>

"That's so much work O_o", yeah it is. So usually you don't bother doing this yourself; if you use a bundler, you use a preprocessor (like block-loader if you're using webpack), or if you don't you often use a special react component that renders text verbatim.

这篇关于使用< code>或使用JSX的ReactJS中的类似标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！