& nbsp jsx không hoạt động

Tôi đang sử dụng thẻ & nbsp trong jsx và nó không hiển thị không gian. Sau đây là một đoạn mã nhỏ của tôi. Vui lòng giúp đỡ.

var Reporting=React.createClass({

  render: function(){
    return(
      <div style={divPositionReporting}>
          <p>Pricing Reports</p>
          <hr></hr>
          Select Scenario:&nbsp;&nbsp;
          <select>
            <option></option>
          </select>
          <button type="button">Get Pricing Report</button>
          <br/>
          Select Takeout Scenario:&nbsp;
          <select>
            <option></option>
          </select>
          <button type="button">Get Pricing Report</button>
          <br/>
      </div>
    );
  },

});

Xem: JSX chuyên sâu

Thử: Select Scenario:{'\u00A0'}

Hoặc là: <div dangerouslySetInnerHTML={{__html: 'Select Scenario: &nbsp;'}} />

Hoặc là: <div>&nbsp;</div>

jsfiddle

Cập nhật

Sau khi xem một số nhận xét và dùng thử. Tôi nhận thấy rằng việc sử dụng html entites bên trong JSX hoạt động tốt (không giống như những gì được nêu trong tài liệu tham khảo jsx-gotchas ở trên [có thể nó đã lỗi thời]).

Vì vậy, sử dụng một cái gì đó như R&D:, sẽ xuất ra: 'R&D'. Có một hành vi kỳ lạ với  , khiến nó hiển thị khác, do đó khiến tôi nghĩ rằng nó không hoạt động:

<div>This works simply:-&nbsp;-</div>
<div>This works simply:- {'\u00A0'}-</div>

Sản xuất:

This works simply:- -
This works simply:-  -

Viết jsxmã của bạn được bao bọc trong { }như hình dưới đây.

<h1>Code {' '}</h1>

Bạn có thể đặt dấu cách hoặc bất kỳ ký tự đặc biệt nào ở đây.

ví dụ trong trường hợp của bạn

Select Takeout Scenario: 

nên như thế này

Select Takeout Scenario:{' '}

Nó sẽ hoạt động.

Như lời khuyên bạn không nên sử dụng &nbspđể thêm không gian thừa, bạn có thể sử dụng css để đạt được tương tự.

{'\u00A0'}hoạt động nhưng khó đọc, vì vậy tôi đã gói nó trong một thành phần hàm :

thành phần / nbsp.js:

export default () => '\u00A0';

sử dụng:

Hello<Nbsp />world

Nếu điều này không hiệu quả với bạn {' '}thì hãy sử dụng {'\u00A0'}.

{' '}sẽ hiển thị một khoảng trắng nhưng có một số trường hợp khi bạn muốn chiều cao dòng cũng được hiển thị trong trường hợp bạn muốn một khoảng trắng bên trong phần tử HTML không có văn bản nào khác, tức là:, <span style={{ lineHeight: '1em' }}>{' '}</span>trong trường hợp đó, bạn sẽ cần sử dụng {'\u00A0'}bên trong span hoặc phần tử HTML.

Hãy thử sử dụng utf-8 nbsp, có vẻ như là không gian đơn giản, nhưng hoạt động tốt mà không cần thêm mã.

Có lẽ, bạn nên tạo biến cho việc này.

Đối với các biểu tượng sao chép: https://unicode-table.com/en/00A0/

Để tạo văn bản tự động, hãy sử dụng một số kiểu chữ.

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

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