人们为什么将{ " }在他们的React/JSX中? [英] Why do people put { " " } in their React / JSX?

问题描述

我在一些React文档以及截屏视频中都有此内容.人们将在其JSX模板中编写{ " " }.

他们为什么这样做?看起来他们正在将其用作换行符的替代方法，但我看不到任何地方都明确说明了这一点.

解决方案

这用于在文本块中放置一个显式空格，因为在存在另一个标记时，在编译/转换时会忽略前导和尾随空格.

示例:

 <div>
 Text
 <a>some Text</a>
</div>
 

将在屏幕上显示Textsome Text的结果. (请参阅缺少的空格)

 <div>
 Text{' '}
 <a>some Text</a>
</div>
 

在屏幕上按Text some Text键将得到想要的结果.

I have this in some React documentation, as well as screencasts. People will write { " " } inside of their JSX templates.

Why do they do this? It looks like they are using it as an alternative to line breaks, but I don't see that explicitly explained anywhere.

解决方案

This is used to put an explicit space in a text block, since leading and trailing spaces are ignored at compile/transformation time when there is another tag.

Example:

<div>
 Text
 <a>some Text</a>
</div>

Will result with Textsome Text on the screen. (see the missing space)

<div>
 Text{' '}
 <a>some Text</a>
</div>

Will result as wanted with Text some Text on the screen.

这篇关于人们为什么将{ " }在他们的React/JSX中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！