بخش های اصلی

آموزش React Native

React Native – Props

در بخش قبلی نحوه ی استفاده از State تغییرپذیر را آموزش دادیم در این بخش نحوه ی ترکیب state و propها را آموزش میدیم.

کامپوننت های نمایشی باید با پاس دادنِ propها، تمام داده ها را پاس بدن. فقط کامپوننت هایِ container باید state داشته باشن.

کامپوننتِ Container

تئوری

اکنون می خوایم کامپوننتِ container را به روز رسانی کنیم. این کامپوننت state را هَندِل می کنه و propها را به کامپوننتّ نمایشی پاس میده.

کامپوننتِ Container فقط برای هَندِل کردنِ state استفاده میشه. تمام قابلیت ها و عملکردهای مربوط به view (استایل ها و ...)، در کامپوننتِ نمایشی هَندِل میشن.

مثال

اگه از مثال بخش قبلی استفاده کنیم، باید عنصرِ Text را از تابعِ render حذف کنیم چون این عنصر برای نمایش متن به کاربرها استفاده شده. این عنصر باید در کامپوننت نمایشی باشه.

در ادامه مروری بر کدهای زیر خواهیم داشت. همان طور که میبینین، MyPresentationalComponent را import کرده ایم و به تابعِ render پاس داده ایم.

باید propها را هم پاس بدیم. propها را با اضافه کردن myText = {this.state.myText} و deleteText = {this.deleteText} به <MyPresentationalComponent>، پاس میدیم. اکنون می توانیم در کامپوننتِ نمایشی به این propها دسترسی داشته باشیم.

src/components/myComponent/MyContainerComponent.js

import React, { Component } from 'react'

import {
   View
} from 'react-native'

import MyPresentationalComponent from './MyPresentationalComponent'

export default class MyContainerComponent extends Component {
   constructor() {
      super()
      this.state = {
      myText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 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.'
      }
   }
   deleteText = () => {
      this.setState({myText: ''})
   }
   render() {
      return (
         <View>
            <MyPresentationalComponent
               myText = {this.state.myText}
               deleteText = {this.deleteText}
            />
         </View>
      )
   }
}

کامپوننت نمایشی

تئوری

کامپوننت های نمایشی باید فقط برای نمایشِ view به کاربرها استفاده بشن. این کامپوننت ها state ندارن و تمام داده ها را دریافت می کنن و مثل propها عمل می کنن.

بهتره که تا جایی که امکان داره از کامپوننت های نمایشی استفاده کنیم.

مثال

همان طور که در بخش قبلی اشاره کردیم، برای کامپوننت های نمایشی از دستور تابعِ EC6 استفاده می کنیم. وقتی کاربر روی متن کلیک کنه، کامپوننت، propها را میگیره، عناصرِ view را برمیگرداند، با استفاده از {props.myText}، متن را برمی گرداند و تابعِ {props.deleteText} را فراخوانی می کنه.

import React, { Component } from 'react'

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

const MyPresentationalComponent = (props) => {
   return (
      <View>
         <Text onPress = {props.deleteText}>
            {props.myText}
         </Text>
      </View>
   )
}

export default MyPresentationalComponent

اکنون همان قابلیت هایی که در بخشِ State  داشتیم را داریم. تنها تفاوتی که وجود داره اینه که کد را برای container  و کاپوننت هایِ نمایشی دوباره ساختیم.

می توانید برنامه را اجرا کنین و متنی که نمایش داده میشه را ببینین.

react native props

اگه روی متن کلیک کنین، متن از صفحه نمایش حذف میشه.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش React Native

Learn React Native

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد