javascript - Best practice when adding whitespace in JSX - Stack Overflow

admin管理员组

文章数量:1134591

I understand how (and why) to add a whitespace in JSX, but I am wondering what's best practice or if any makes any real difference?

Wrap both elements in a span

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

Add them on one line

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

Add space with JS

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

I understand how (and why) to add a whitespace in JSX, but I am wondering what's best practice or if any makes any real difference?

Wrap both elements in a span

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

Add them on one line

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

Add space with JS

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

• javascript
• reactjs

Share Improve this question Follow edited May 23, 2017 at 11:46 CommunityBot 111 silver badge asked Oct 26, 2016 at 13:48 Jan SwartJan Swart 7,1911010 gold badges3939 silver badges5151 bronze badges 2

• 1 You don't need the extra span, React has fixed long standing issues with text nodes and your second example is fine – nanobar Commented Oct 26, 2016 at 13:50
• 1 I don't know that there is a defined "best practice" -- certainly you don't need to wrap everything in <span> tags, but I generally just follow generic HTML practices when worrying about white space. – arthurakay Commented Oct 26, 2016 at 14:00

Add a comment  | 

11 Answers 11

Sorted by: Reset to default 172

Because &nbsp causes you to have non-breaking spaces, you should only use it where necessary. In most cases, this will have unintended side effects.

Older versions of React, I believe all those before v14, would automatically insert <span> </span> when you had a newline inside of a tag.

While they no longer do this, that's a safe way to handle this in your own code. Unless you have styling that specifically targets span (bad practice in general), then this is the safest route.

Per your example, you can put them on a single line together as it's pretty short. In longer-line scenarios, this is how you should probably do it:

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

This method is also safe against auto-trimming text editors.

The other method is using {' '} which doesn't insert random HTML tags. This could be more useful when styling, highlighting elements, and removes clutter from the DOM. If you don't need backwards compatibility with React v14 or earlier, this should be your preferred method.

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

You can use the css property white-space and set it to pre-wrap to the enclosing div element.

div {
     white-space: pre-wrap;
}

I tend to use  

It's not pretty but it's the least confusing way to add whitespace I've found and it gives me absolute control over how much whitespace I add.

If I want to add 5 spaces:

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

It's easy to identify exactly what I'm trying to do here when I come back to the code weeks later.

You can use curly braces like expression with both double quotes and single quotes for space i.e.,

{" "} or {' '}

You can also use ES6 template literals i.e.,

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

You can also use &nbsp like below (inside span)

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

You can also use &nbsp in dangerouslySetInnerHTML when printing html content

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

You can add simple white space with quotes sign: {" "}

Also you can use template literals, which allow to insert, embedd expressions (code inside curly braces):

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

I have been trying to think of a good convention to use when placing text next to components on different lines, and found a couple good options:

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

or

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

Each of these produces clean html without additional   or other extraneous markup. It creates fewer text nodes than using {' '}, and allows using of html entities where {' hello & goodbye '} does not.

You don't need to insert   or wrap your extra-space with <span/>. Just use HTML entity code for space -  

Insert regular space as HTML-entity

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

Despite using   this is a neat approach: using the <Fragment> tag to insert HTML inside a variable, which allows the creation of a custom spacer to be used in JSX.

Import { Fragment } ...

import { Fragment } from "react"

Create the variable..

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

Note: it can also be done with <span> instead of <Fragment>

Use like so..

return ( 
  <div> some text here {space} and here... </div> 
)

use {} or {``} or   to create space between span element and content.

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

We can use \u00A0 to add empty space between template string in the following way

Error:

${d.id} {d.name}

output: 1 John

Solution:

${d.id}\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${d.name}

output: 1          John

If the goal is to seperate two elements, you can use CSS like below:

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

本文标签： javascriptBest practice when adding whitespace in JSXStack Overflow