if/else के बाद उपयोग करने के लिए `let` या 'const` घोषित करने के लिए अन्यथा उपयोग करें?

Question

मुझे यकीन नहीं है कि ऐसा क्यों लगता है कि ऐसा लगता है कि मैं let या const चर नहीं कह सकता अगर मैं उन्हें if/else कथन में घोषित करता हूं।

if (withBorder) { 
    const classes = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`; 
} else { 
    const classes = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`; 
} 
return (
    <div className={classes}> 
    {renderedResult} 
    </div> 
); 

यदि मैं इस कोड का उपयोग करता हूं तो यह कहता है कि classes is not defined।

लेकिन अगर मैं constvar को कक्षाओं परिभाषित किया गया है बदल लेकिन मैं एक चेतावनी मिलती है के बारे में classes used outside of binding context और all var declarations must be at the top of the function scope

मैं इसे ठीक कर सकता है कैसे?

Answer 1

आप त्रिगुट काम का उपयोग करना चाहिए इसके बाद के संस्करण को परिभाषित करेगा में:

const classes = withBorder ? 
`${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` : 
`${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` 

अन्य टिप्पणी में विनिर्दिष्ट/उत्तर let और const ब्लॉक किए गए हैं गुंजाइश इसलिए यही कारण है कि वे आपके उदाहरण में काम नहीं करते हैं।

एक ड्रायर कोड आप भी घोंसला स्ट्रिंग के अंदर त्रिगुट शाब्दिक कर सकते हैं के लिए:

const classes = `${withBorder ? styles.dimensions: ''} ${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` 

Answer 2

let और const ब्लॉक स्तर स्कॉप्ड अर्थ है कि उनका उपयोग केवल उस ब्लॉक के भीतर किया जा सकता है जिसे वे परिभाषित किया गया है। { // if defined in here can only be used here }

इस मामले मैं सिर्फ अगर/किसी और बयान

let classes; 

if (withBorder) { 
    classes = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`; 
} else { 
    classes = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`; 
} 

Answer 3

एक if का प्रयोग न करें - else -statement लेकिन एक त्रिगुट अभिव्यक्ति: वैकल्पिक रूप से

const classes = withBorder 
    ? `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` 
    :       `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`; 

, बस if ब्लॉक के बाहर इसे घोषित करें, जो आपको डुप्लिकेशन से छुटकारा पाने की अनुमति देता है:

let classes = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`; 
if (withBorder) { 
    classes += ` ${styles.circularBorder}`; 
    // or if you care about the order, 
    // classes = `${styles.circularBorder} ${classes}`; 
} 

messy classnames construction पर भी एक नज़र डालें।

Answer 4

let और const ब्लॉक स्तर स्कॉप्ड हैं, इसलिए आपको उन्हें ब्लॉक के बाहर परिभाषित करना होगा। var काम करता है क्योंकि यह बाहर निकलता है।

आप @finalfreq

या

तरह if ब्लॉक से पहले classes परिभाषित कर सकते हैं

let classes = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`; 

if (withBorder) { 
    classes += `${styles.circularBorder}`; 
} 

Answer 5

ESLint मानक पंक्ति के आरंभ में ऑपरेटरों पसंद करती है। लंबे समय तक सशर्तों को भी समझा जाना चाहिए, जब तक कि कंप्यूटर टाइम लूप में न हो।

इस विशेष मामले में तार भी लंबे हैं, इसलिए मैं उनको भी सार दूंगा। बर्गी के रास्ते में समस्या यह है कि अनुरूपता के कारण अधिकांश लिंटर्स अपनी शैली को अपंग करेंगे।

यदि आप टर्नरी से परिचित हैं, तो आपको यह सब कुछ सामान्य और पढ़ने में आसान रहता है, जो आपको होना चाहिए।

const styleWithBorder = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` 
const styleWithoutBorder = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` 
const classes = isBorderedElement ? [ styleWithBorder ] : [ styleWithoutBorder ]