ส่วนประกอบปฏิกิริยา

ส่วนประกอบเป็นเหมือนฟังก์ชันที่ส่งคืนองค์ประกอบ HTML

ส่วนประกอบปฏิกิริยา

ส่วนประกอบเป็นบิตโค้ดอิสระและนำกลับมาใช้ใหม่ได้ มีจุดประสงค์เดียวกับฟังก์ชัน JavaScript แต่ทำงานแยกกันและส่งกลับ HTML

ส่วนประกอบมีสองประเภท ได้แก่ ส่วนประกอบของคลาสและส่วนประกอบของฟังก์ชัน ในบทช่วยสอนนี้ เราจะเน้นที่ส่วนประกอบของฟังก์ชัน

สร้างส่วนประกอบแรกของคุณ

เมื่อสร้างส่วนประกอบ React ชื่อของส่วนประกอบต้องขึ้นต้นด้วยตัวพิมพ์ใหญ่

ส่วนประกอบของคลาส

องค์ประกอบของคลาสต้องมีextends React.Componentคำสั่ง คำสั่งนี้สร้างการสืบทอดไปยัง React.Component และให้คอมโพเนนต์ของคุณเข้าถึงฟังก์ชันของ React.Component

องค์ประกอบยังต้องการrender()เมธอด เมธอดนี้ส่งคืน HTML

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

ส่วนประกอบฟังก์ชัน

นี่คือตัวอย่างเดียวกันกับด้านบน แต่สร้างขึ้นโดยใช้องค์ประกอบ Function แทน

คอมโพเนนต์ของฟังก์ชันจะส่งกลับ HTML และทำงานในลักษณะเดียวกับคอมโพเนนต์ของคลาส แต่คอมโพเนนต์ของฟังก์ชันสามารถเขียนได้โดยใช้โค้ดน้อยกว่ามาก เข้าใจง่ายกว่า และจะเป็นที่ต้องการในบทช่วยสอนนี้

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

การแสดงผลส่วนประกอบ

ตอนนี้แอปพลิเคชัน React ของคุณมีส่วนประกอบที่เรียกว่า Car ซึ่งส่งคืน <h2>องค์ประกอบ

ในการใช้องค์ประกอบนี้ในแอปพลิเคชันของคุณ ให้ใช้ไวยากรณ์ที่คล้ายกันเป็น HTML ปกติ: <Car />

ReactDOM.render(<Car />, document.getElementById('root'));

อุปกรณ์ประกอบฉาก

ส่วนประกอบสามารถส่งผ่านเป็นpropsซึ่งย่อมาจากคุณสมบัติ

อุปกรณ์ประกอบฉากเป็นเหมือนอาร์กิวเมนต์ของฟังก์ชัน และคุณส่งองค์ประกอบดังกล่าวเป็นแอตทริบิวต์

คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับpropsบทต่อไป

function Car(props) {
  return <h2>I am a {props.color} Car!</h2>;
}

ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

ส่วนประกอบในส่วนประกอบ

เราสามารถอ้างถึงส่วนประกอบภายในส่วนประกอบอื่น ๆ ได้:

function Car() {
  return <h2>I am a Car!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

ส่วนประกอบในไฟล์

React คือทั้งหมดที่เกี่ยวกับการนำโค้ดกลับมาใช้ใหม่ และขอแนะนำให้แยกส่วนประกอบของคุณออกเป็นไฟล์แยกกัน

ในการทำเช่นนั้น ให้สร้างไฟล์ใหม่ที่มี.js นามสกุลไฟล์และใส่โค้ดลงไป:

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

export default Car;

เพื่อให้สามารถใช้ส่วนประกอบรถยนต์ได้ คุณต้องนำเข้าไฟล์ในแอปพลิเคชันของคุณ

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';

ReactDOM.render(<Car />, document.getElementById('root'));

function (props) {
  return <h2>Hi, I'm {props.name}</h2>;
}