React Native - อุปกรณ์ประกอบฉาก

ในบทสุดท้ายของเราเราได้แสดงให้คุณเห็นถึงวิธีการใช้งานที่เปลี่ยนแปลงได้ 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บท. ข้อแตกต่างเพียงอย่างเดียวคือเราปรับโครงสร้างโค้ดของเราใหม่เป็นคอนเทนเนอร์และส่วนประกอบในการนำเสนอ

คุณสามารถเรียกใช้แอพและดูข้อความในภาพหน้าจอต่อไปนี้

หากคุณคลิกที่ข้อความข้อความนั้นจะถูกลบออกจากหน้าจอ