& nbsp jsx काम नहीं कर रहा है

Question 1

मैं jsx में & nbsp टैग का उपयोग कर रहा हूं और यह स्थान प्रदान नहीं कर रहा है। निम्नलिखित मेरे कोड का एक छोटा सा टुकड़ा है। कृपया मदद करें।

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

});

Question 2

देखें: JSX इन डेप्थ

प्रयत्न: Select Scenario:{'\u00A0'}

या: <div dangerouslySetInnerHTML={{__html: 'Select Scenario:  '}} />

या: <div> </div>

jsfiddle

अपडेट करें

कुछ टिप्पणियों को देखने के बाद, और इसे आज़माकर देखें। यह मेरे ध्यान में आया है कि html का उपयोग JSX के अंदर प्रवेश करता है ठीक काम करता है (इसके विपरीत जो ऊपर दिए गए jsx-gotchas संदर्भ में कहा गया है [शायद यह पुराना है])।

इसलिए कुछ का उपयोग करना:: R&D, आउटपुट: 'आर एंड डी'। इसके साथ एक अजीब व्यवहार होता है  , जो इसे अलग तरीके से प्रस्तुत करने का कारण बनता है, इस प्रकार मुझे लगता है कि यह काम नहीं करता है:

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

पैदा करता है:

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

Question 3

{'\u00A0'}काम करता है, लेकिन पढ़ना मुश्किल है, इसलिए मैंने इसे एक फ़ंक्शन घटक में लपेट दिया :

घटकों / nbsp.js:

export default () => '\u00A0';

उपयोग:

Hello<Nbsp />world

Question 4

नीचे दिखाए अनुसार अपना jsxकोड लिखें { }।

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

आप यहां स्पेस या कोई विशेष पात्र रख सकते हैं।

जैसे आपके मामले में

Select Takeout Scenario:&nbsp;

इस तरह होना चाहिए

Select Takeout Scenario:{' '}

यह काम करेगा।

सलाह के रूप में आपको &nbspअतिरिक्त स्थान जोड़ने के लिए उपयोग नहीं करना चाहिए , आप उसी को प्राप्त करने के लिए सीएसएस का उपयोग कर सकते हैं ।

Question 5

यदि यह आपके लिए काम नहीं करता है {' '}तो उपयोग करें {'\u00A0'}।

{' '}किसी स्थान को रेंडर करेगा लेकिन कुछ ऐसे मामले हैं जब आप चाहते हैं कि लाइन की ऊँचाई को एक ऐसे मामले में भी प्रस्तुत किया जाए जिसमें आप एक HTML तत्व के अंदर एक स्थान चाहते हैं जिसमें कोई अन्य पाठ न हो अर्थात: <span style={{ lineHeight: '1em' }}>{' '}</span>उस स्थिति में आपको {'\u00A0'}अंदर उपयोग करने की आवश्यकता होगी अवधि या HTML तत्व।

Question 6

Utf-8 nbsp का उपयोग करने का प्रयास करें, साधारण स्थान के रूप में प्रतीत होता है, लेकिन अतिरिक्त कोड के बिना अच्छा काम कर रहा है।

हो सकता है, आपको इसके लिए वैरिएबल बनाना चाहिए।

कॉपी प्रतीकों के लिए: https://unicode-table.com/en/00A0/

स्वचालित रूप से ग्रंथों को उत्पन्न करने के लिए, कुछ टाइपोग्राफ का उपयोग करें।

Question 7

आप ES6 टेम्पलेट शाब्दिक का भी उपयोग कर सकते हैं,

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