जेएसएक्स

Question

में व्हाइटस्पेस जोड़ने पर सबसे अच्छा अभ्यास मैं समझता हूं कि कैसे (और why) जेएसएक्स में एक व्हाइटस्पेस जोड़ने के लिए, लेकिन मुझे आश्चर्य है कि सबसे अच्छा अभ्यास क्या है या कोई वास्तविक अंतर बनाता है?

लपेटें अंतराल में दोनों तत्वों

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

टी जे एस के साथ एक लाइन पर उन्हें जोड़े

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

जोड़ें अंतरिक्ष

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

Answer 1

क्योंकि &nbsp आपको गैर-ब्रेकिंग रिक्त स्थान होने का कारण बनता है, आपको केवल इसका उपयोग करना चाहिए जहां आवश्यक हो। ज्यादातर मामलों में, इसमें अनपेक्षित दुष्प्रभाव होंगे।

प्रतिक्रिया के पुराने संस्करण, मुझे विश्वास है कि v14 से पहले उन सभी का मानना ​​है, जब आपके पास टैग के अंदर एक नई पंक्ति थी तो स्वचालित रूप से <span> </span> डालेंगे।

हालांकि वे अब ऐसा नहीं करते हैं, यह आपके अपने कोड में इसे संभालने का एक सुरक्षित तरीका है। जब तक आप स्टाइल है कि विशेष रूप से लक्षित करता है span (सामान्य रूप में बुरा व्यवहार), तो यह सबसे सुरक्षित मार्ग है।

अपने उदाहरण के अनुसार, आप उन्हें एक ही पंक्ति पर एक साथ रख सकते हैं क्योंकि यह बहुत छोटा है। लंबे समय तक लाइन स्थितियों में, यह कैसे आप शायद यह करना चाहिए:

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

इस विधि भी ऑटो ट्रिमिंग पाठ संपादक के खिलाफ सुरक्षित है।

अन्य विधि {' '} का उपयोग कर रही है जो यादृच्छिक HTML टैग नहीं डालती है। यह स्टाइलिंग, तत्वों को हाइलाइट करते समय और डीओएम से अव्यवस्था को हटाते समय अधिक उपयोगी हो सकता है। यदि आपको रिएक्ट v14 या इससे पहले की पिछली संगतता की आवश्यकता नहीं है, तो यह आपकी पसंदीदा विधि होनी चाहिए।

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

Answer 2

मैं  

यह सुंदर नहीं है लेकिन यह मुझे पाया गया सफेद जगह जोड़ने का सबसे भ्रमित तरीका है और यह मुझे कितना सफेद स्थान जोड़ता है इस पर पूर्ण नियंत्रण देता है।

मैं 5 रिक्त स्थान जोड़ना चाहते हैं:

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

जब मैं बाद में कोड सप्ताह के लिए वापस आने के लिए वास्तव में क्या मैं यहाँ क्या करने की कोशिश कर रहा हूँ की पहचान आसान है।

Answer 3

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

`${2 * a + b}.?!=-`