रिएक्ट में सशर्त स्टाइलिंग को संभालने का सही तरीका

Question

मैं अभी कुछ रिएक्ट कर रहा हूं और मैं सोच रहा था कि क्या सशर्त स्टाइलिंग करने का कोई "सही" तरीका है। ट्यूटोरियल में वे उपयोग करते हैं

style={{
  textDecoration: completed ? 'line-through' : 'none'
}}

मैं इनलाइन स्टाइल का उपयोग नहीं करना पसंद करता हूं इसलिए मैं सशर्त स्टाइल को नियंत्रित करने के लिए एक वर्ग का उपयोग करना चाहता हूं। सोच के प्रतिक्रियात्मक तरीके से यह कैसे होगा? या मैं सिर्फ इस इनलाइन स्टाइल तरीके का उपयोग करना चाहिए?

Comments

मुझे लगता है कि आप हो सकता है reduxऔर reactउलझन में। Redux का स्टाइल से कोई लेना-देना नहीं है।

— रॉसिडी

मुझे लगता है कि आपकी प्राथमिकता दस्तावेजों के लिए स्पॉट-ऑन है, लेकिन उन अनुप्रयोगों के लिए अति-उत्साही है जहां मार्कअप इंटरचेंज कॉम्पिटिटर महत्वपूर्ण नहीं है। कुछ प्रमुख वेब ऐप्स वास्तव में कक्षाओं से छुटकारा पा रहे हैं और केवल इनलाइन शैली का उपयोग कर रहे हैं, जो कि अधिक अनुमानित और आसान है, जिसके बारे में 5 लागू नियमों में से पाठ को बोल्ड बना रहा है। जब एट्रिअल्स गतिशील होते हैं, तो आप बहुत अधिक बैंडविड्थ नहीं बचाते हैं जैसे आप दोहराए गए दस्तावेजों के साथ करते हैं। ऐप के शब्दार्थ (व्यू-सोर्स मार्कअप)

— उतने

@rossipedia आह हाँ, धन्यवाद, मिला हुआ है, इस बारे में सोचते समय रेडकुट ट्यूटोरियल देख रहा था, धन्यवाद!

— द्वादशीं

यदि आप सुनिश्चित नहीं हैं कि कैस्केड के कारण टेक्स्ट-डेकोरेशन का मूल्य क्या होगा और आप केवल एक लाइन-थ्रू आवेदन करना चाहते हैं यदि पूर्ण सत्य है, तो आपको एक स्टाइल ऑब्जेक्ट बनाना होगा। इस तरह, आप इसे गलती से किसी और के लिए सेट नहीं करते हैं जब यह एक और मूल्य था। const style = {} अगर (पूर्ण) {style ['textDecoration'] = 'लाइन-थ्रू'}

— Edward

Answer 1

यदि आप एक वर्ग नाम का उपयोग करना पसंद करते हैं, तो हर तरह से एक वर्ग नाम का उपयोग करें।

className={completed ? 'text-strike' : null}

तुम भी उत्तम दर्जे का पैकेज उपयोगी हो सकता है । इसके साथ, आपका कोड इस तरह दिखेगा:

className={classNames({ 'text-strike': completed })}

सशर्त स्टाइल करने का कोई "सही" तरीका नहीं है। जो भी आपके लिए सबसे अच्छा काम करे। खुद के लिए, मैं इनलाइन स्टाइल से बचना पसंद करता हूं और केवल वर्णित तरीके से कक्षाओं का उपयोग करता हूं।

POSTSCRIPT [06-AUG-2019]

जब तक यह सच है कि रिएक्ट स्टाइल के बारे में अनोपिनिएटेड है, इन दिनों मैं सीएसएस-इन-जेएस समाधान की सिफारिश करूंगा; अर्थात् स्टाइल वाले घटक या भावना । यदि आप प्रतिक्रिया करने के लिए नए हैं, तो शुरू करने के लिए CSS कक्षाओं या इनलाइन शैलियों से चिपके रहें। लेकिन एक बार जब आप रिएक्ट के साथ सहज हो जाते हैं तो मैं इनमें से किसी एक पुस्तकालय को अपनाने की सलाह देता हूं। मैं उन्हें हर प्रोजेक्ट में इस्तेमाल करता हूं।

Comments

अरे वहाँ, अगर आपने अपने सशर्त स्टाइलिंग विधि के रूप में क्लासनेम का उपयोग करने का फैसला किया है। के बिना classNames lib। मैं आपको undefinedइसके बजाय उपयोग करने की सलाह देता हूं null। className⚡️ - | प्रकार (अपरिभाषित स्ट्रिंग) - संपत्ति इनपुट एक स्ट्रिंग या अपरिभाषित लिखते ही लेता है

— 0xx

@JadRizk बेहतर तरीका यह है कि यदि आप के पास इसे सेट करने के लिए वैध मान नहीं है, तो क्लासनेम बिल्कुल भी सेट न करें। const attrs = completed?{className:'text-strike'}:{}तब <li {...attrs}>text to maybe strike</li>(प्रसार ऑपरेटर)। जब तक आपके पास असाइन करने के लिए एक अच्छा मूल्य नहीं है, तब तक आप क्लासनेम बिल्कुल भी सेट नहीं करते हैं। यह कुछ इनलाइन शैलियों को सेट करने के लिए एक महत्वपूर्ण दृष्टिकोण है, जहां आप यह नहीं जान सकते कि वर्तमान मूल्य क्या है (क्योंकि यह सीएसएस द्वारा एक फाइल में सेट किया जा सकता है जिसे आप नियंत्रित नहीं कर सकते हैं)।

— लिनक्सडिसिपल

@LinuxDisciple यदि सभी फ़ील्ड फ़ॉल्सी का मूल्यांकन करते हैं तो classnamesबस एक खाली स्ट्रिंग लौटाता है यह किसी भी CSS से प्रभावित नहीं होगा।

— डेविड एल वॉल्श

@ DavidL.Walsh 21 घंटे पहले मुझे लगा कि JadRizk का समाधान एक झूठा विकल्प था nullऔर undefinedअब भी classhtml में इसका कोई मूल्य- गुण नहीं होगा (यानी <p class></p>इसके बजाय <p></p>) तो मैंने एक तरीका प्रदान किया जिससे सेटिंग करने classNameसे बचे । जैसा कि होता है कि मैं JadRizk के समाधान के बारे में गलत था। बताई गई समस्या के लिए, मेरा मानना ​​है कि JadRizk के शोधन के साथ आपका समाधान सबसे अच्छा है। मेरे सिंटैक्स ने सशर्त रूप से प्रॉप्स और उनके मूल्यों की एक मनमानी सूची निर्धारित की है, लेकिन यह सिर्फ एक क्लास नाम सेट करने के लिए ओवरकिल है।

— 22

Answer 2

 <div style={{ visibility: this.state.driverDetails.firstName != undefined? 'visible': 'hidden'}}></div>

उपरोक्त कोड चेकआउट करें। वह तरकीब करेगा।

Comments

कुछ इस तरह की तलाश में था। सशर्त इनलाइन स्टाइल, धन्यवाद।

— सौविक घोष

<div style = {दृश्यता: this.state.driverDetails.firstName! == अपरिभाषित? 'दृश्यमान': 'छिपा हुआ'}}> </ div>। == में छोटा टाइपो।

— विनायक शाहदेव

Answer 3

यदि आपको इनलाइन शैलियों को सशर्त रूप से लागू करने की आवश्यकता है (सभी या कुछ भी लागू करें) तो यह नोटेशन भी काम करता है:

style={ someCondition ? { textAlign:'center', paddingTop: '50%'} : {}}

अगर 'someCondition' पूरा नहीं होता है तो आप खाली ऑब्जेक्ट पास करते हैं।

Comments

क्या यह प्रतिमान एक अनावश्यक रूप से भिन्न नहीं है? डोम diffing की मेरी समझ यह है कि styleप्रोप यहाँ हमेशा के बाद से जावास्क्रिप्ट में बदल जाएगा {} != {} अगर मैं diffing के बारे में सही कर रहा हूँ, शायद यह उपयोग करने के लिए बेहतर है " undefined" के बदले " {}"

— डावसन बी

अच्छा नोट है। मैं इस बारे में निश्चित नहीं हूँ।

— व्लादो

Answer 4

सबसे पहले, मैं आपके साथ शैली के एक मामले के रूप में सहमत हूं - मैं इनलाइन शैलियों के बजाय सशर्त रूप से कक्षाएं भी लागू करूंगा। लेकिन आप एक ही तकनीक का उपयोग कर सकते हैं:

<div className={{completed ? "completed" : ""}}></div>

राज्य के अधिक जटिल सेटों के लिए, कक्षाओं की एक सरणी जमा करें और उन्हें लागू करें:

var classes = [];

if (completed) classes.push("completed");
if (foo) classes.push("foo");
if (someComplicatedCondition) classes.push("bar");

return <div className={{classes.join(" ")}}></div>;

Answer 5

इसके अलावा:

style={{
  textDecoration: completed ? 'line-through' : 'none'
}}

आप छोटी परिधि का उपयोग करके निम्नलिखित प्रयास कर सकते हैं:

style={{
  textDecoration: completed && 'line-through'
}}

https://codeburst.io/javascript-short-circuit-conditionals-bbc13ac3e9eb

लिंक से महत्वपूर्ण जानकारी:

लघु परिच्छेद का अर्थ है कि जावास्क्रिप्ट में जब हम एक और अभिव्यक्ति (&&) का मूल्यांकन कर रहे हैं, यदि पहला ऑपरेंड झूठा है, तो जावास्क्रिप्ट शॉर्ट-सर्किट होगा और दूसरे ऑपरेंड पर भी नहीं दिखेगा।

यह ध्यान देने योग्य है कि यह गलत होगा यदि पहला ऑपरेंड गलत है, तो यह विचार करना पड़ सकता है कि यह आपकी शैली को कैसे प्रभावित करेगा।

अन्य समाधान अधिक सर्वोत्तम अभ्यास हो सकते हैं, लेकिन सोचा कि यह साझा करने के लायक होगा।

Answer 6

एक और तरीका, इनलाइन शैली और प्रसार ऑपरेटर का उपयोग करना

style={{
  ...completed ? { textDecoration: completed } : {}
}}

इस तरह से कुछ स्थितियों में उपयोगी हो सकते हैं जहां आप स्थिति के आधार पर एक ही समय में गुणों का एक गुच्छा जोड़ना चाहते हैं।

Comments

यदि आप एक डिफ़ॉल्ट शैली नहीं बदलना चाहते हैं तो अच्छा तरीका है

— dhilt

Answer 7

इसी सवाल का जवाब देने की कोशिश करते हुए मैं इस सवाल पर आया। क्लासरूम ऐरे और जॉइन के साथ मैक्रोहन का दृष्टिकोण ठोस है।

अपने अनुभव के माध्यम से, मैं बहुत सारी विरासत रूबी कोड के साथ काम कर रहा हूं जो कि प्रतिक्रिया में परिवर्तित हो रहा है और जैसा कि हम घटक (ओं) का निर्माण करते हैं, मुझे लगता है कि मैं खुद को मौजूदा सीएसएस वर्गों और इनलाइन शैलियों दोनों के लिए पहुंच रहा हूं।

एक घटक के अंदर उदाहरण स्निपेट:

// if failed, progress bar is red, otherwise green 
<div
    className={`progress-bar ${failed ? failed' : ''}`}
    style={{ width: this.getPercentage() }} 
/>

फिर से, मैं खुद को विरासत के सीएसएस कोड तक पहुंचता हूं, इसे घटक के साथ "पैकेजिंग" करता हूं और आगे बढ़ता हूं।

इसलिए, मुझे वास्तव में यह महसूस होता है कि यह हवा में एक बिट है जो "सबसे अच्छा" है क्योंकि यह लेबल आपकी परियोजना के आधार पर बहुत भिन्न होगा।

Comments

आपको स्टाइल की विशेषता के साथ क्लासनेम को संयोजित नहीं करना चाहिए, यह थोड़ा गड़बड़ है

— सेबस्टियन वोरैक

Answer 8

स्टाइल को संभालने का सबसे अच्छा तरीका सीएसएस गुणों के सेट के साथ कक्षाओं का उपयोग करना है।

उदाहरण:

<Component className={this.getColor()} />

getColor() {
    let class = "badge m2";
    class += this.state.count===0 ? "warning" : danger;
    return class;
}

Answer 9

आप कुछ इस तरह से उपयोग कर सकते हैं।

render () {
    var btnClass = 'btn';
    if (this.state.isPressed) btnClass += ' btn-pressed';
    else if (this.state.isHovered) btnClass += ' btn-over';
    return <button className={btnClass}>{this.props.label}</button>;
  }

वरना, आप उपयोग कर सकते हैं classnames NPM पैकेज गतिशील और सशर्त className रंगमंच की सामग्री के साथ (विशेष रूप से अधिक तो सशर्त स्ट्रिंग परिवर्तन की तुलना में) काम करने के लिए सरल बनाने के लिए।

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'