& nbsp jsx ไม่ทำงาน

ฉันใช้แท็ก & nbsp ใน jsx และไม่แสดงช่องว่าง ต่อไปนี้เป็นข้อมูลโค้ดของฉันเล็กน้อยโปรดช่วยด้วย

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>
    );
  },

});

ดู: JSX ในความลึก

ลอง: Select Scenario:{'\u00A0'}

หรือ: <div dangerouslySetInnerHTML={{__html: 'Select Scenario: &nbsp;'}} />

หรือ: <div>&nbsp;</div>

jsfiddle

อัปเดต

หลังจากเห็นบางความคิดเห็นและทดลองใช้ ฉันพบว่าการใช้ html entites ภายใน JSX นั้นทำงานได้ดี (ไม่เหมือนกับที่ระบุไว้ในข้อมูลอ้างอิง jsx-gotchas ข้างต้น [อาจจะล้าสมัย])

ดังนั้นการใช้สิ่งที่ต้องการ: R&Dจะแสดงผลลัพธ์: 'R&D' มีพฤติกรรมแปลก ๆ ด้วย ซึ่งทำให้มันแสดงผลต่างกันจึงทำให้ฉันคิดว่ามันใช้ไม่ได้:

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

ผลิต:

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

{'\u00A0'}ใช้งานได้ แต่อ่านยากดังนั้นฉันจึงรวมไว้ในส่วนประกอบของฟังก์ชัน :

ส่วนประกอบ / nbsp.js:

export default () => '\u00A0';

การใช้งาน:

Hello<Nbsp />world

เขียนjsxรหัสของคุณห่อไว้{ }ตามที่แสดงด้านล่าง

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

คุณสามารถใส่ช่องว่างหรืออักขระพิเศษได้ที่นี่

เช่นในกรณีของคุณ

Select Takeout Scenario: 

ควรจะเป็นแบบนี้

Select Takeout Scenario:{' '}

มันจะทำงาน.

เนื่องจากคำแนะนำคุณไม่ควรใช้&nbspเพื่อเพิ่มพื้นที่พิเศษคุณสามารถใช้cssเพื่อให้ได้สิ่งเดียวกัน

หากยังไม่ได้ผลสำหรับคุณแล้วการใช้งาน{' '}{'\u00A0'}

{' '}จะแสดงช่องว่าง แต่มีบางกรณีที่คุณต้องการให้ความสูงของเส้นแสดงผลในกรณีที่คุณต้องการช่องว่างภายในองค์ประกอบ HTML ที่ไม่มีข้อความอื่นเช่น<span style={{ lineHeight: '1em' }}>{' '}</span>ในกรณีนี้คุณจะต้องใช้{'\u00A0'}ภายใน สแปนหรือองค์ประกอบ HTML

พยายามใช้ utf-8 nbsp ดูเหมือนเป็นพื้นที่เรียบง่าย แต่ทำงานได้ดีโดยไม่ต้องใช้รหัสเพิ่มเติม

บางทีคุณควรสร้างตัวแปรสำหรับสิ่งนี้

สำหรับสัญลักษณ์การคัดลอก: https://unicode-table.com/en/00A0/

สำหรับการสร้างข้อความโดยอัตโนมัติให้ใช้ตัวพิมพ์บางตัว

คุณยังสามารถใช้ตัวอักษรเทมเพลต ES6 เช่น

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