سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. همونطور که مشاهده نموده اید ما تا ابن جا مبحث State یا حالت در React Native و تفاوت بین State و props رو بررسی نمودیم. حال در ادامه توضیحاتی راجع به کامپوننت Props در React Native و کامپوننت Container همچنین کامپوننت Presentational در React Native رو نشون خواهیم داد.
در بخش قبلی نشان دادیم که چگونه از state قابل تغییر استفاده کنیم. در این فصل، ما به شما نشان خواهیم داد که چگونه state و Props را ترکیب کنید.
اجزای Presentational باید تمام داده ها را با عبور props ها دریافت کنند. فقط اجزای container باید وضعیت داشته باشند.
اکنون ما درک می کنیم که اجزاء کانتینری چیست و چگونه کار می کند.
حالا کامپوننت Container را به روز می کنیم. این کامپوننت state را اداره می کند و Props ها را به کامپوننت های presentational منتقل می کند.
کامپوننت کانتینری تنها برای مدیریت state استفاده می شود. تمام قابلیت های مربوط به نمایش (ظاهر و غیره) در مولفه های presentational نشان داده می شود.
اگر ما بخواهیم از مثال فصل قبل استفاده کنیم، باید عنصر Text را حذف کنیم متن را از تابع render ، زیرا این عنصر برای ارائه متن به کاربران استفاده می شود.
این باید درون کامپوننت presentational باشد.
اجازه دهید کد داده شده را در مثال زیر مرور کنیم. ما PresentationalComponent را import می کنیم و آن را به تابع render منتقل می کنیم.
پس از وارد کردن PresentationProject و انتقال آن به تابع render ،باید Props را منتقل کنیم. ما از اضافه کردن myText = {this.state.myText} و deleteText = {this.deleteText} به <PresentationalComponent> استفاده می کنیم . در حال حاضر، ما قادر خواهیم بود به این درون کامپوننت های presentational دسترسی داشته باشیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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> ); } } |
اکنون ما درک می کنیم که یک مولفه ی Presentational چیست و همچنین چگونه کار می کند.
اجزاء Presentational باید فقط برای ارائه نمایش به کاربران استفاده شوند. این کامپوننت state را ندارند آن ها تمام داده ها و عملکردها را به عنوان props دریافت می کنند.
بهترین روش این است که از کامپوننت presentational به همان اندازه که ممکن است استفاده شود.
همانطور که در فصل قبلی ما اشاره کردیم، ما از نحو کارکرد تابع EC6 syntax برای کامپوننت presentational استفاده می کنیم.
کامپوننت ما props ها را دریافت می کند،عناصر قابل نمایش را برمی گرداند،
متن فعلی با استفاده از {props.myText} تابع {props.deleteText} را هنگامی که یک کاربر بر روی متن کلیک می کند، فراخوانی کند.
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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 داریم. تنها تفاوت این است که ما کد را به کانتینر و کامپوننت presentational اصلاح کردیم.
شما می توانید برنامه را اجرا کنید و متن را مانند تصویر زیر مشاهده کنید.
اگر بر روی متن کلیک کنید، از صفحه حذف خواهد شد.
خب دوستان عزیز توضیحاتی راجع به کامپوننت Props در React Native و کامپوننت Container همچنین کامپوننت Presentational در React Native رو نشون دادیم .
در ادامه به استایل دهی در React Native خواهیم پرداخت.