रिएक्टिव नेटिव - प्रॉप्स

हमारे अंतिम अध्याय में, हमने आपको दिखाया कि आप कैसे उपयोग कर सकते हैं state। इस अध्याय में, हम आपको दिखाएंगे कि कैसे राज्य और को मिलाएंprops

प्रस्तुतिकरण घटकों को पास करके सभी डेटा प्राप्त करना चाहिए props। केवल कंटेनर घटक होना चाहिएstate

कंटेनर घटक

अब हम समझेंगे कि एक कंटेनर घटक क्या है और यह भी कि यह कैसे काम करता है।

सिद्धांत

अब हम अपने कंटेनर घटक को अपडेट करेंगे। यह घटक राज्य को संभालेगा और प्रेजेंटेशन को प्रेजेंटेशनल कंपोनेंट में पास करेगा।

कंटेनर घटक का उपयोग केवल राज्य को संभालने के लिए किया जाता है। दृश्य (स्टाइलिंग आदि) से संबंधित सभी कार्यक्षमता को प्रस्तुतिकरण घटक में संभाला जाएगा।

उदाहरण

अगर हम पिछले अध्याय से उदाहरण का उपयोग करना चाहते हैं तो हमें इसे हटाने की जरूरत है Textइस फ़ंक्शन को रेंडर फ़ंक्शन से तत्व उपयोगकर्ताओं को पाठ प्रस्तुत करने के लिए उपयोग किया जाता है। यह प्रेजेंटेशनल कंपोनेंट के अंदर होना चाहिए।

आइए नीचे दिए गए उदाहरण में कोड की समीक्षा करें। हम आयात करेंगेPresentationalComponent और इसे रेंडर फ़ंक्शन में पास करें।

आयात करने के बाद PresentationalComponentऔर इसे रेंडर फ़ंक्शन में पास करें, हमें प्रॉपर पास करने की आवश्यकता है। हम जोड़कर प्रॉपर पास करेंगेmyText = {this.state.myText} तथा deleteText = {this.deleteText} सेवा <PresentationalComponent>। अब, हम इसे प्रेजेंटेशनल कंपोनेंट के अंदर एक्सेस कर पाएंगे।

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'

export default class App extends React.Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
      aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
      nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
      officia deserunt mollit anim id est laborum.'
   }
   updateState = () => {
      this.setState({ myState: 'The state is updated' })
   }
   render() {
      return (
         <View>
            <PresentationalComponent myState = {this.state.myState} updateState = {this.updateState}/>
         </View>
      );
   }
}

प्रस्तुति घटक

अब हम समझेंगे कि एक प्रस्तुतिकरण घटक क्या है और यह भी कि यह कैसे काम करता है।

सिद्धांत

उपयोगकर्ताओं को दृश्य प्रस्तुत करने के लिए केवल प्रस्तुति घटकों का उपयोग किया जाना चाहिए। इन घटकों में राज्य नहीं है। वे प्रॉपर के रूप में सभी डेटा और फ़ंक्शन प्राप्त करते हैं।

सबसे अच्छा अभ्यास संभव के रूप में ज्यादा प्रस्तुतिकरण घटकों का उपयोग करना है।

उदाहरण

जैसा कि हमने अपने पिछले अध्याय में उल्लेख किया है, हम प्रस्तुतिकरण घटकों के लिए EC6 फ़ंक्शन सिंटैक्स का उपयोग कर रहे हैं।

हमारे घटक को प्रॉपर, रिटर्न व्यू एलिमेंट्स, वर्तमान टेक्स्ट का उपयोग करके प्राप्त होगा {props.myText} और कॉल करें {props.deleteText} उपयोगकर्ता जब पाठ पर क्लिक करता है तो कार्य करता है।

PresentationalComponent.js

import React, { Component } from 'react'
import { Text, View } from 'react-native'

const PresentationalComponent = (props) => {
   return (
      <View>
         <Text onPress = {props.updateState}>
            {props.myState}
         </Text>
      </View>
   )
}
export default PresentationalComponent

अब, हमारी अपनी कार्यक्षमता समान है Stateअध्याय। अंतर केवल इतना है कि हमने कंटेनर और प्रेजेंटेशनल कंपोनेंट को अपना कोड रिफैक्ट कर दिया है।

आप ऐप को चला सकते हैं और टेक्स्ट को निम्न स्क्रीनशॉट में देख सकते हैं।

यदि आप टेक्स्ट पर क्लिक करते हैं, तो इसे स्क्रीन से हटा दिया जाएगा।