js怎么添加html空格,javascript-在JSX中添加空格的最佳做法

javascript-在JSX中添加空格的最佳做法

我知道如何(以及为什么)在JSX中添加空格，但是我想知道什么是最佳实践，或者是否有什么真正的区别？

将两个元素包装在一起

Hello

World!

一行添加

Hello World!

用JS添加空间

Hello {" "}

World!

8个解决方案

62 votes

因为{' '}使您拥有不间断的空格，所以只应在必要的地方使用它。 在大多数情况下，这会产生意想不到的副作用。

我相信，较早版本的React(v14之前的所有版本)会在标签中包含换行符时自动插入{' '}。

尽管他们不再这样做，但这是在您自己的代码中处理此问题的安全方法。 除非您具有专门针对{' '}的样式(通常是不良做法)，否则这是最安全的方法。

根据您的示例，您可以将它们放在一行上，因为它很短。 在更长的情况下，这可能是您应该做的：

Hello World!

So much more text in this box that it really needs to be on another line.

此方法对于自动修剪文本编辑器也是安全的。

另一种方法是使用{' '}，它不会插入随机HTML标记。 当样式化，突出显示元素并从DOM中消除混乱时，这可能会更加有用。 如果您不需要与React v14或更早版本的向后兼容性，这应该是您的首选方法。

Hello World!

{' '}

So much more text in this box that it really needs to be on another line.

Sawtaytoes answered 2020-02-11T22:36:14Z

9 votes

您可以使用模板文字：

{` `} // Notice this sign " ` ",its not normal quotes.

我们可以将文字与表达式一起使用(花括号内的代码)：

`${2 * a + b}.?!=-`

Vasyl Gutnyk answered 2020-02-11T22:36:38Z

7 votes

我倾向于使用Hello     World!

这不是很漂亮，但这是添加我发现的空格最不容易混淆的方法，它使我可以完全控制要添加的空格。

如果要添加5个空格：

Hello     World!

几周后回到代码时，很容易准确地确定我要在这里做什么。

Daniel Murawsky answered 2020-02-11T22:37:16Z

3 votes

您不需要插入 或用包裹多余的空间。只需使用HTML实体代码作为空间-

插入常规空间作为HTML实体

Full name:

{this.props.fullName}

Andrey Ivlev answered 2020-02-11T22:37:40Z

2 votes

您可以使用大括号，例如带有双引号和单引号的表达式作为空格，例如，

{" "} or {' '}

您还可以使用ES6模板文字，即

`

` or ` ${value}`

您也可以像下面一样使用＆nbsp

sample text  

打印html内容时，也可以在危险地使用SetInnerHTML中使用＆nbsp

Hemadri Dasari answered 2020-02-11T22:38:14Z

2 votes

使用{}或{``}或 在span元素和内容之间创建空间。

{notif.name}  { notif.count }{``}

KARTHIKEYAN.A answered 2020-02-11T22:38:34Z

2 votes

我一直在尝试在将文本放置在不同行上的组件旁边时使用一个好的约定，并找到了两个不错的选择：

Hello {

World

}!

要么

Hello {}

World

{} again!

每一个都产生干净的html，而没有额外的 或其他无关的标记。 与使用{' '}相比，它创建的文本节点更少，并允许使用没有{' hello & goodbye '}的html实体。

undefined answered 2020-02-11T22:39:03Z

0 votes

您可以使用css属性空白，并将其设置为预包装到封闭的div元素。

div {

white-space: pre-wrap;

}

i_code answered 2020-02-11T22:39:23Z