บทเรียน props และ state ผ่าน customcard

ปรับปรุง : 2564-09-10 (การติดตั้ง node.js)

ความหมายของ CustomCard Custom แปลว่า กำหนดเอง ส่วน Card แปลว่า การ์ด บัตร ไพ่ ซึ่ง CustomCard ในที่นี้ หมายถึง คลาสที่ถูกสร้างขึ้นมา และกำหนดการแสดงผลได้ด้วยตนเอง ซึ่งตัวอย่างที่เขียนโดย Pavan อธิบายการเขียนเรื่อง props และ state แสดงตัวอย่างการเขียน พร้อมคำอธิบายที่เข้าใจได้ง่าย อ่านได้ที่ opencodez.com
นอกจากนี้ยังมีการอธิบายเรื่อง props และ state ที่เข้าใจได้ง่าย ได้แก่ Kent C. Dodds เขียนเรื่อง Add มี sandbox ที่ codesandbox.io (React / Reactnative sandbox) เนื้อหาที่ kentcdodds.com ส่วน Kenta Kodashima เขียนเรื่อง props , state และ component เนื้อหาที่ kentakodashima.medium.com ส่วน Prashant Rewatkar เขียนเรื่องมีหน้าจอของ emulator เนื้อหาที่ c-sharpcorner.com ส่วน ไซต์ reactnative เขียนเรื่อง state พร้อม sandbox ของ expo และประมวลผลได้ทันที เนื้อหาที่ reactnative.dev

props
รูปแบบข้อมูลของการควบคุม component ซึ่ง props จะไม่เปลี่ยน เมื่ออยู่ใน component ถูกสร้างมาใช้งานใหม่

state
รูปแบบข้อมูลของการควบคุม component ซึ่ง state ถูกเปลี่ยนข้อมูลใน component ได้ อาจใช้ควบคุมการทำงาน

CustomCard.js แบบที่ 1 ทดสอบที่ https://snack.expo.dev/@thaiall/f6feef
ทดสอบที่ https://reactnative.dev/docs/image
เพื่อให้เข้าใจพื้นฐานการเขียนโปรแกรมบน React native นี่คือตัวอย่างคลาสที่นำไปทดสอบประมวลผลได้ทันที บน snack.expo.dev โดย class จะมี method ชื่อ render ที่ return ทั้งหมด 3 component รวมกันแล้วส่งออกไปแสดงผล โดยไม่มีการรับค่าใดไปควบคุมการประมวลผลแบบ props หรือ state

/* --- แบบ class component --- */
import React, {Component} from 'react';
import {  Image,  View,  Text,} from 'react-native';
class CustomCard1 extends Component {
  render() {
    return (
      <view>
      <text>hello world</text>
      <img source="{{" uri:'https:="" www.thaiall.com="" me="" picme.jpg'}}="" style="{{width:" 300,="" height="" :="" 250}}="">
      </view>
    );
  }
}
export default CustomCard1;
/* --- แบบ function component --- */
import React, {Component} from 'react';
import {  View,  Text,} from 'react-native';
const CustomCard2 = () => {
    return (
      <view><text>hello world</text></view>
    );
}
export default CustomCard2;

CustomCard.js แบบที่ 2 นิยามศัพท์
props คือ รูปแบบข้อมูลของการควบคุม component ซึ่ง props จะไม่เปลี่ยน เมื่ออยู่ใน component ถูกสร้างมาใช้งานใหม่
state คือ รูปแบบข้อมูลของการควบคุม component ซึ่ง state ถูกเปลี่ยนข้อมูลใน component ได้ อาจใช้ควบคุมการทำงาน
Image คือ Component ของ react
source คือ parameter ของ Components ที่ required
CustomCard คือ custom component ตัวอย่างนี้ได้ประกาศสร้าง 2 props คือ this.props.title และ this.props.url เมื่อเรียกใช้ CustomCard และกำหนดคุณสมบัติให้รับค่าได้ 2 ตัว คือ title กับ url ซึ่งจะส่ง url ไปเป็น ค่าของ source parameter ส่วน title ไปเป็น ค่าของ Text component นั่นคือ 2 props ที่ประกาศขึ้นมานี้ เมื่อนำไปใช้ใน class ที่เขียนขึ้นมา จะมีหน้าที่ต่างกัน

import React, {Component} from 'react';
import {  Image,  View,  Text,} from 'react-native';
class CustomCard extends Component {
  render() {
    return (
      <view>
      <text>{this.props.title}</text>
      <img source="{this.props.url}" style="{{width:" 300,="" height="" :="" 250}}="">
      </view>
    );
  }
}
export default CustomCard;

App.js เรียกใช้ CustomCard.js แบบที่ 2
พบว่าใน CustomCard component ได้กำหนด props ขึ้น 2 ตัว ดังนั้นภายใต้การใช้คลาส CustomCard จึงต้องส่ง value ให้กับ properties หรือ parameter ของ CustomCard จำนวน 2 ตัวเช่นกัน คือ url และ title และค่าที่ส่งเข้าไป ก็จะแตกต่างกันไปในการเรียกใช้คลาสในแต่ละครั้ง

import React, {Fragment} from 'react';
import CustomCard from './CustomCard';
const App = () => {
  let firstImage = { uri: 'https://www.thaiall.com/me/picme.jpg'};
  let secondImage = { uri: 'https://www.thaiall.com/me/burin.jpg'};
  return (
    <fragment>
      <customcard url="{firstImage}" title="{"First" title"}="">
      <customcard url="{secondImage}" title="{"Second" title"}="">
    </customcard></customcard></fragment>
  );
};
export default App;

CustomCard.js แบบที่ 3

import React, {Component} from 'react';
import { Image, View, Button, Text, } from 'react-native';
class CustomCard extends Component {
  constructor(props){
    super(props)
    this.state = {isHidden : false}
  }
  showHideText = () => {
    this.setState({isHidden : !this.state.isHidden})
  }
  render() {
    return (
      <view>
      {!this.state.isHidden && <text>{this.props.title}</text>}
      <img source="{this.props.url}" style="{{width:" 300,="" height="" :="" 250}}="">
      <button title="Click Me" onpress="{this.showHideText}/">
       
    );
  }
} 
export default CustomCard;
</button></view>

App.js รวมคลาส และเขียนแบบ function แบบที่ 1

https://snack.expo.dev/@thaiall/f6feef
import React, {Component, Fragment} from 'react'
import {  Image,  View,  Button, Text,} from 'react-native'
class CustomCard extends Component {
  constructor(props){
    super(props)
    this.state = {isHidden : false}
  }
  showHideText = () => {
    this.setState({isHidden : !this.state.isHidden})
  }
  render() {
    return (
      <view>
      {!this.state.isHidden && <text>{this.props.title}</text>}
      <img source="{this.props.url}" style="{{width:" 300,="" height="" :="" 250}}="">
      <button title="Click Me" onpress="{this.showHideText}/">
       
    );
  }
} 
const App = () => {
  let firstImage = { uri: 'https://www.thaiall.com/me/picme.jpg'};
  let secondImage = { uri: 'https://www.thaiall.com/me/burin.jpg'};
  return (
    <fragment>
      <customcard url="{firstImage}" title="{"First" title"}="">
      <customcard url="{secondImage}" title="{"Second" title"}="">
    </customcard></customcard></fragment>
  );
};
export default App;
</button></view>

App.js รวมคลาส และเขียนแบบ class แบบที่ 2

import React, {Component, Fragment} from 'react'
import {  Image,  View,  Button, Text,} from 'react-native'
class CustomCard extends Component {
  constructor(props){
    super(props)
    this.state = {isHidden : false}
  }
  showHideText = () => {
    this.setState({isHidden : !this.state.isHidden})
  }
  render() {
    return (
      <view>
      {!this.state.isHidden && <text>{this.props.title}</text>}
      <img source="{this.props.url}" style="{{width:" 300,="" height="" :="" 250}}="">
      <button title="Click Me" onpress="{this.showHideText}/">
       
    );
  }
} 
class App extends Component {
  render() {
  let firstImage = { uri: 'https://www.thaiall.com/me/picme.jpg'};
  let secondImage = { uri: 'https://www.thaiall.com/me/burin.jpg'};
  return (
    <fragment>
      <customcard url="{firstImage}" title="{"First" title"}="">
      <customcard url="{secondImage}" title="{"Second" title"}="">
    </customcard></customcard></fragment>
  );
  };
};
export default App;
</button></view>

ใช้เวลาโหลดเว็บเพจ = 122 มิลลิวินาที สูง = 2846 จุด กว้าง = 1264 จุด

"ไม่เริ่มต้นในวันนี้ จะไม่มีทางสำเร็จในวันพรุ่ง" โดย โยฮัน ว็อล์ฟกัง ฟ็อน เกอเทอ

Thaiall.com

Truehits.net