Phương pháp hay nhất khi thêm khoảng trắng trong JSX

Tôi hiểu cách (và tại sao ) thêm khoảng trắng trong JSX, nhưng tôi đang băn khoăn không biết phương pháp hay nhất nào tạo ra sự khác biệt thực sự?

Gói cả hai yếu tố trong một khoảng

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

Thêm chúng trên một dòng

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

Thêm không gian với JS

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

Bởi vì &nbspnguyên nhân của bạn có những khoảng trống không bị phá vỡ, bạn chỉ nên sử dụng nó ở những nơi cần thiết. Trong hầu hết các trường hợp, điều này sẽ có tác dụng phụ ngoài ý muốn.

Các phiên bản React cũ hơn, tôi tin rằng tất cả những phiên bản trước v14, sẽ tự động chèn <span> </span>khi bạn có dòng mới bên trong thẻ.

Mặc dù họ không còn làm điều này nữa, nhưng đó là một cách an toàn để xử lý điều này trong mã của riêng bạn. Trừ khi bạn có kiểu dáng nhắm mục tiêu cụ thể span(thông lệ nói chung), thì đây là cách an toàn nhất.

Theo ví dụ của bạn, bạn có thể đặt chúng trên một dòng cùng nhau vì nó khá ngắn. Trong các trường hợp dòng dài hơn, đây là cách bạn có thể nên làm:

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

Phương pháp này cũng an toàn trước trình soạn thảo văn bản tự động cắt xén.

Phương pháp khác đang sử dụng {' '}không chèn các thẻ HTML ngẫu nhiên. Điều này có thể hữu ích hơn khi tạo kiểu, làm nổi bật các phần tử và loại bỏ sự lộn xộn khỏi DOM. Nếu bạn không cần khả năng tương thích ngược với React v14 hoặc phiên bản cũ hơn, thì đây sẽ là phương pháp ưu tiên của bạn.

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

Bạn có thể sử dụng thuộc tính css white-space và đặt nó thành pre-wrap thành phần tử div bao quanh.

div {
     white-space: pre-wrap;
}

Bạn có thể thêm khoảng trắng đơn giản với dấu ngoặc kép: {" "}

Ngoài ra, bạn có thể sử dụng các ký tự mẫu , cho phép chèn, các biểu thức nhúng (mã bên trong dấu ngoặc nhọn):

`${2 * a + b}.?!=-` // Notice this sign " ` ",its not normal quotes.

Tôi có xu hướng sử dụng  

Nó không đẹp nhưng đó là cách ít khó hiểu nhất để thêm khoảng trắng mà tôi đã tìm thấy và nó cho tôi quyền kiểm soát tuyệt đối về lượng khoảng trắng mà tôi thêm vào.

Nếu tôi muốn thêm 5 dấu cách:

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

Thật dễ dàng để xác định chính xác những gì tôi đang cố gắng thực hiện ở đây khi tôi quay lại mã vài tuần sau đó.

Bạn không cần phải chèn  hoặc bọc thêm không gian của mình <span/>. Chỉ cần sử dụng mã thực thể HTML cho không gian - 

Chèn không gian thông thường dưới dạng HTML-entity

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

Tôi đã cố gắng nghĩ ra một quy ước tốt để sử dụng khi đặt văn bản bên cạnh các thành phần trên các dòng khác nhau và đã tìm thấy một số tùy chọn tốt:

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

hoặc là

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

Mỗi thứ trong số này tạo ra html sạch mà không có  đánh dấu bổ sung hoặc không liên quan khác. Nó tạo ra ít nút văn bản hơn so với việc sử dụng {' '}và cho phép sử dụng các thực thể html nếu {' hello & goodbye '}không.

Bạn có thể sử dụng dấu ngoặc nhọn như biểu thức với cả dấu ngoặc kép và dấu ngoặc đơn cho khoảng trắng, tức là,

{" "} or {' '}

Bạn cũng có thể sử dụng các ký tự mẫu ES6, tức là,

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

Bạn cũng có thể sử dụng & nbsp như bên dưới (bên trong span)

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

Bạn cũng có thể sử dụng & nbsp trong nguy hiểmSetInnerHTML khi in nội dung html

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

sử dụng {} hoặc {``} hoặc  để tạo khoảng cách giữa phần tử span và nội dung.

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

Nếu mục tiêu là tách hai phần tử, bạn có thể sử dụng CSS như dưới đây:

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