آموزش Props در برنامه نویسی ریکت نیتیو
آموزش Props در برنامه نویسی ریکت نیتیو
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش Props در برنامه نویسی ریکت نیتیو خواهیم پرداخت.
مولفه های ارائه باید تمام داده ها را با عبور از Props جمع آوری کنند. فقط اجزای ظرف باید state داشته باشند.
کامپوننت کانتینر
اکنون خواهیم فهمید که یک مولفه کانتینر چیست و همچنین نحوه عملکرد آن.
تئوری
اکنون ما مولفه ظرف خود را به روز می کنیم. این مولفه state را کنترل کرده و وسایل را به مولفه Presentational منتقل می کند.
از مولفه کانتینر فقط برای جابجایی state استفاده می شود. تمام عملکردهای مربوط به نمایش (یک ظاهر طراحی و غیره) در مولفه نمایش استفاده می شود.
مثال
اگر می خواهیم از مثال آخر استفاده کنیم ، باید عنصر Text را از تابع رندر حذف کنیم زیرا این عنصر برای ارائه متن به کاربران استفاده می شود. این باید درون مولفه Presentational باشد.
اجازه دهید ما کد را در مثالی که در زیر آورده شده مرور کنیم. ما PresentationalComponent را وارد می کنیم و آن را به تابع رندر منتقل می کنیم.
بعد از اینکه PresentationalComponent را وارد کردیم و آن را به تابع رندر منتقل کردیم، باید props را رد کنیم. ما با افزودن {myText = {this.state.myText و deleteText = {this.deleteText} به <PresentationalComponent> مقادیر مورد نظر را منتقل خواهیم کرد. اکنون، ما می توانیم در داخل مولفه ارائه به این دسترسی داشته باشیم.
App.js
|
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 چیست و همچنین نحوه کارکرد آن را نیز خواهیم فهمید.
تئوری
از مولفه های Presentational باید فقط برای ارائه دید به کاربران استفاده شود. این مولفه ها state ندارند. آنها همه داده ها و تابع ها را به عنوان props دریافت می کنند.
بهترین روش استفاده از مولفه های Presentational تا حد ممکن است.
مثال
همانطور که در فصل قبلی خود اشاره کردیم، ما از نحو عملکرد EC6 برای اجزای ارائه استفاده می کنیم.
مولفه ما با استفاده از {props.myText} ، props} را دریافت می کند، عناصر نمایشی را بازمی گرداند، متن را ارائه می دهد و وقتی کاربر روی متن کلیک می کند، تابع {props.deleteText} را فراخوانی می کند
PresentationalComponent.js
|
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 مجدد تبدیل کردیم.
می توانید برنامه را اجرا کرده و متن را مانند تصویر زیر مشاهده کنید.
اگر روی متن کلیک کنید، از صفحه حذف می شود.
لیست جلسات قبل آموزش ریکت نیتیو
.svg)
دیدگاه شما