在JSX中添加空白的最佳实践

Best practice when adding whitespace in JSX

本文关键字：最佳 空白 JSX 添加      更新时间：2023-09-26

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

在一个span中换行两个元素 

<div className="top-element-formatting">
  <span>Hello </span>
  <span className="second-word-formatting">World!</span>
</div>

添加到一行

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
  </div>

添加空格

<div className="top-element-formatting">
    Hello {" "}
    <span className="second-word-formatting">World!</span>
</div>

由于&nbsp使您具有非换行空格，因此您应该仅在必要时使用它。在大多数情况下，这会产生意想不到的副作用。

旧版本的React，我相信所有v14之前的版本，当你在标签里面有换行符时，会自动插入<span> </span>。

虽然他们不再这样做，但这是在您自己的代码中处理此问题的安全方法。除非您有专门针对span的样式(通常是不好的做法)，否则这是最安全的路线。

根据你的例子，你可以把它们放在一行，因为它很短。在较长的场景中，您应该这样做:

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
    <span> </span>
    So much more text in this box that it really needs to be on another line.
  </div>

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

另一种方法是使用{' '}不插入随机HTML标签。在样式化、突出显示元素和从DOM中删除混乱时，这可能更有用。如果你不需要向后兼容React v14或更早版本，这应该是你的首选方法。

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
    {' '}
    So much more text in this box that it really needs to be on another line.
  </div>

您可以使用css属性white-space并将其设置为预换行到封闭的div元素

div {
     white-space: pre-wrap;
}

我倾向于使用&nbsp;

它不漂亮，但这是我发现的最不令人困惑的添加空白的方法，它让我可以完全控制我添加的空白的大小。

如果我想加5个空格:

Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span className="second-word-formatting">World!</span>

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

你可以使用像表达式一样的花括号加上双引号和单引号来表示空格，即

{" "} or {' '}

你也可以使用ES6模板字面值，例如

`   <li></li>` or `  ${value}`

你也可以像下面这样使用 

<span>sample text &nbsp; </span>

在打印html内容时，也可以在dangerlysetinnerhtml中使用 

<div dangerouslySetInnerHTML={{__html: 'sample html text: &nbsp;'}} />

您可以使用引号添加简单的空白:{" "}

还可以使用模板字面值，它允许插入、嵌入表达式(花括号内的代码):

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

我一直在考虑在不同的行上将文本放在组件旁边时使用的良好约定，并发现了几个不错的选项:

<p>
    Hello {
        <span>World</span>
    }!
</p>

或

<p>
    Hello {}
    <span>World</span>
    {} again!
</p>

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

您不需要插入&nbsp;或用<span/>包裹额外空间。只使用HTML实体代码的空间- &#32;

为HTML-entity插入规则空格 

<form>
  <div>Full name:</span>&#32;
  <span>{this.props.fullName}</span>
</form>

使用{}或{' '}或&nbsp; 在span元素和内容之间创建空间。

<b> {notif.name} </b> <span id="value"> &nbsp;{ notif.count }{``} </span>

如果目标是分隔两个元素，您可以使用下面的CSS:

A<span style={{paddingLeft: '20px'}}>B</span>

尽管使用&nbsp;，但这是一种简洁的方法:使用<Fragment>标记在变量中插入HTML，这允许在JSX中使用自定义分隔符创建。

Import { Fragment }… 

import { Fragment } from "react"

创建变量..

const space = <Fragment>&nbsp;&nbsp;&nbsp;&nbsp;</Fragment>

注意:也可以用<span>代替<Fragment> 

return ( 
  <div> some text here {space} and here... </div> 
)
相关文章：