อ่านเกี่ยวกับ React Basic

Props คืออะไรใน React?#

• Props (ย่อมาจาก “Properties”) คือข้อมูลที่ส่งจาก Parent Component ไปยัง Child Component โดยที่ Child Component ไม่สามารถเปลี่ยนแปลงค่า Props ได้ (Props เป็นเพียงค่า Read-Only)
• Props ช่วยให้ Component สามารถ รับข้อมูลจากภายนอก และทำให้ Component นั้นๆ สามารถนำข้อมูลไปแสดงผลหรือใช้ในการทำงานอื่นๆ ได้

การส่ง Props จาก Parent ไปยัง Child#

• การส่ง Props ให้กับ Child Component จาก Parent Component สามารถทำได้โดยการใส่ชื่อของ Prop พร้อมกับค่าที่ต้องการส่ง

ตัวอย่าง :#

// App() = Parent Component , Welcome() = Child Component
function App() {
  return <Welcome name="Alice" />; 
  // ส่งค่า name="Alice" ไปยัง Child Component (Welcome)
}
function Welcome(props) {
  return <h1> สวัสดี, {props.name} </h1>;
  // Child Component รับค่าผ่าน props.name และแสดงผลเป็นข้อความ "สวัสดี, Alice"
}

• อธิบาย:
  • ใน Parent Component (App) เราส่งค่า name=“Alice” ไปยัง Child Component (Welcome)
  • Child Component (Welcome) จะรับค่าผ่าน props.name และแสดงผลเป็นข้อความ “สวัสดี, Alice”

เดี๋ยวมาทำต่อ 2:29:20

test

การใช้งาน Props กับหลายค่า#

• อธิบายการส่งข้อมูลหลายๆ ค่าไปยัง Child Component
• ตัวอย่าง:

function Greeting(props) {
  return <h1>สวัสดี, {props.firstName} {props.lastName}</h1>;
}

function App() {
  return <Greeting firstName="John" lastName="Doe" />;
}

• อธิบายการส่งหลายค่า Prop ในครั้งเดียว

การใช้ Props ใน Function Components#

• อธิบายว่าใน Functional Components สามารถรับ Props ได้ผ่าน parameter ของฟังก์ชัน

• ตัวอย่าง:

function Person({ name, age }) {
  return <h2>ชื่อ: {name}, อายุ: {age}</h2>;
}

function App() {
  return <Person name="Jane" age={25} />;
}

• อธิบายการใช้ destructuring ในการรับ Props ใน Function Component

การใช้ Default Props#

• อธิบายการตั้งค่าค่าเริ่มต้นสำหรับ Props ด้วย defaultProps

• ตัวอย่าง:

function Welcome({ name }) {
  return <h1>สวัสดี, {name}</h1>;
}

Welcome.defaultProps = {
  name: 'Guest'
};

function App() {
  return <Welcome />;
}

• อธิบายว่าในกรณีที่ไม่มีการส่งค่า name มายัง Component ค่า name จะถูกตั้งเป็น Guest โดยอัตโนมัติ

การส่งฟังก์ชันผ่าน Props#

• อธิบายการส่ง ฟังก์ชัน จาก Parent Component ไปยัง Child Component ผ่าน Props และให้ Child Component เรียกใช้งานฟังก์ชันนั้น

• ตัวอย่าง:

function Button(props) {
  return <button onClick={props.onClick}>คลิกที่นี่</button>;
}

function App() {
  const handleClick = () => {
    alert('ปุ่มถูกคลิก');
  };

  return <Button onClick={handleClick} />;
}

• อธิบายการส่ง ฟังก์ชัน ให้ Child Component ผ่าน Props และการเรียกใช้งานฟังก์ชันนั้นใน Child Component

การตรวจสอบ Prop Types#

• อธิบายการใช้ PropTypes เพื่อทำการตรวจสอบประเภทของ Props ที่ส่งมา

• ตัวอย่าง:

import PropTypes from 'prop-types';

function Person({ name, age }) {
  return <h2>ชื่อ: {name}, อายุ: {age}</h2>;
}

Person.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired
};

function App() {
  return <Person name="John" age={30} />;
}

• อธิบายการใช้ PropTypes เพื่อทำให้แน่ใจว่า Props ที่ส่งเข้ามามีประเภทข้อมูลถูกต้องและเป็นไปตามที่กำหนด

Props.children#

• อธิบายการใช้ props.children เพื่อให้ Child Component รับข้อมูลภายในที่ส่งมาจาก Parent Component

• ตัวอย่าง:

function Layout(props) {
  return (
    <div>
      <header>Header</header>
      <main>{props.children}</main>
      <footer>Footer</footer>
    </div>
  );
}

function App() {
  return (
    <Layout>
      <h2>เนื้อหาหลัก</h2>
    </Layout>
  );
}

• อธิบายว่า props.children จะทำให้ Child Component สามารถแสดงข้อมูลที่ถูกส่งเข้ามาจาก Parent Component (ในที่นี้คือ <h2>เนื้อหาหลัก</h2>)

สรุป#

• สรุปข้อดีของการใช้ Props:
  • ช่วยให้ Component สามารถส่งข้อมูลไปยัง Component อื่นๆ ได้
  • ช่วยให้ Components เป็น Reusable โดยสามารถปรับข้อมูลที่ส่งไปได้
  • ทำให้การจัดการข้อมูลในแอปพลิเคชัน React ง่ายขึ้น