“Props” เป็นคำหลักพิเศษใน React Props ใช้สำหรับส่งข้อมูลไปยังส่วนประกอบ

ในขณะที่ใช้อุปกรณ์ประกอบฉาก เช่น ตัวแปรในส่วนประกอบ เราสามารถใช้อุปกรณ์ประกอบฉากต่อส่วนประกอบได้

Prop เป็นวัตถุ JavaScript และภายใน prop มีชื่อและตัวแปร prop

เนื่องจากอุปกรณ์ประกอบฉาก เราจึงสามารถถ่ายโอนค่าระหว่างส่วนประกอบต่างๆ ได้

ส่วนประกอบที่ 1:

import react from 'react';
import Users from './Users';

function Counter() {
  return(
    <>
      <Users name="Fatma" />
    </>
  );
}
export default Counter;

function Users(props) {
  return (
    <>
    {props.name}
    </>
  );
}
export default Users;

แทนที่จะเขียนอุปกรณ์ประกอบฉากทุกครั้ง เราสามารถเขียนคุณสมบัติภายในส่วนประกอบได้
แบบนี้;

function Users({name, age}) {
  return (
    <>
    <h1>{name} {age}</h1>
    </>
  );
}

export default Users;

จุดประสงค์ของสิ่งนี้ กระบวนการรายการใด ๆ ฯลฯ คีย์ prop ใช้เพื่อแสดงรายการนิพจน์ที่เราส่งคืนในลูปที่มีประสิทธิภาพดี องค์ประกอบที่อยู่นอกสุดสามารถเป็นเสาหลักได้

ประเภทอุปกรณ์ประกอบฉาก

ก่อนอื่นเราต้องนำเข้า PropTypes

เมื่อเราส่งประเภทไปยังคุณสมบัติที่เรากำหนด เราจะกำหนดประเภทภายนอกส่วนประกอบ

import PropTypes from "prop-types";

function Users({name, age, answer}) {
  return (
    <>
    <h1>{name} {age}</h1>
    </>
  );
}

Users.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  answer: PropTypes.bool,
};

export default Users;

หากเราเขียน isRequired ถัดจากนั้นหลังจากระบุประเภทอุปกรณ์ประกอบฉากแล้ว ช่องนั้นจะต้องไม่เว้นว่างไว้

เราเขียน isRequired ถัดจากคุณสมบัติที่เราได้ระบุไว้

name: PropTypes.string.isRequired,

หากเราจะป้อนมากกว่าหนึ่งประเภทข้อมูลสำหรับพร็อพเพอร์ตี้ เราจะใช้ OneOfType

age: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

เมื่อป้อนข้อมูลประเภทวัตถุ เราจะใช้รูปร่างเพื่อกำหนดประเภทสำหรับองค์ประกอบย่อยของวัตถุ

address: PropTypes.shape({title : PropTypes.string, zipCode: PropTypes.number,}),

เราสามารถกำหนดค่าเริ่มต้นให้กับอุปกรณ์ประกอบฉากที่ไม่ได้กำหนดประเภทใดๆ เราต้องกำหนดมันยกเว้นประเภทอื่น

Users.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  answer: PropTypes.bool,
  address: PropTypes.shape({title : PropTypes.string, zipCode: PropTypes.number,}),
};

Users.defaultProps = {
  answer: false,
}