प्रत्येक तत्व को व्यक्तिगत रूप से स्टाइल करने के बजाय, मान लें कि मेरी प्रतिक्रिया देशी ऐप्स में विभिन्न पृष्ठों/घटकों पर कई तत्वों का पृष्ठभूमि रंग है ...

सामान्य तत्वों के लिए वैश्विक स्टाइलिंग का सर्वोत्तम अभ्यास क्या है? कुशल तरीका। धन्यवाद दोस्तों।

PS : मैं कक्षा के बजाय फ़ंक्शन का उपयोग कर रहा हूं और मैं इस प्रतिक्रिया-मूल चीज़ के लिए नया हूं।

3
Bzx naga 22 सितंबर 2020, 05:11

2 जवाब

सबसे बढ़िया उत्तर

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

export const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      },
      button: {
        alignItems: 'center',
        backgroundColor: '#DDDDDD',
        padding: 10,
        marginBottom: 10
      }
    })

और बाद में आयात कमांड का उपयोग करके आयात करें:

import {styles} from '.... path to file where you placed styles code ... "
1
Jose Cabrera Zuniga 22 सितंबर 2020, 05:39

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

function ComponentInheritingStyle() {
  return (
      <BaseStyle style={styles.button}>
          {...this.props.children}
     </BaseStyle>
     );
   }

export const styles = StyleSheet.create({
  button: {
    backgroundColor: 'blue',
    fontSize: '12',
    borderRadius: '4',
  },
  div: {
    border: '2px',
    borderColor: 'lightblue',
    padding: 10,
    marginBottom: 10
  }
})

आप कक्षा के माध्यम से बेहतर स्पष्टता के लिए नीचे दिए गए लिंक को पढ़ सकते हैं। React JS में इनहेरिटेंस

2
Vijay122 22 सितंबर 2020, 07:32