प्रतिक्रिया

Question

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

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

का उपयोग मैं इनलाइन स्टाइल उपयोग नहीं करना चाहते तो मैं बजाय सशर्त स्टाइल को नियंत्रित करने के एक वर्ग का उपयोग करना चाहते। सोचने के सही तरीके से यह कैसे दृष्टिकोण करेगा? या क्या मुझे सिर्फ इनलाइन स्टाइलिंग तरीके का उपयोग करना चाहिए?

Answer 1

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

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

आप classnames पैकेज सहायक भी पा सकते हैं। इसके साथ, अपने कोड इस तरह दिखेगा:

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

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

Answer 2

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

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

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

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