HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

บทช่วย สอนตอบโต้

หน้าแรก แนะนำตัว ตอบสนอง เริ่มต้น ตอบสนอง ES6
ตอบสนอง ES6 คลาส ES6 ฟังก์ชันลูกศร ES6 ES6 ตัวแปร วิธีการอาร์เรย์ ES6 ES6 การทำลายล้าง ES6 ตัวดำเนินการสเปรด โมดูล ES6 ตัวดำเนินการ ES6 Ternary
React Render HTML ตอบโต้ JSX ส่วนประกอบปฏิกิริยา คลาสตอบโต้ ตอบสนองอุปกรณ์ประกอบฉาก ปฏิกิริยาเหตุการณ์ เงื่อนไขการตอบสนอง รายการตอบโต้ แบบฟอร์มตอบโต้ ตอบสนองเราเตอร์ บันทึกโต้ตอบ ตอบสนอง CSS จัดแต่งทรงผม ตอบสนอง Sass จัดแต่งทรงผม

ตะขอตอบสนอง

ตะขอคืออะไร? ใช้สถานะ ใช้เอฟเฟกต์ ใช้บริบท ใช้Ref ใช้ลด ใช้โทรกลับ ใช้บันทึก ตะขอแบบกำหนดเอง

แบบฝึกหัดตอบโต้

ตอบคำถาม แบบฝึกหัดตอบโต้ ใบรับรองปฏิกิริยา

รายการตอบโต้

❮ ก่อนหน้า ถัดไป ❯

ใน React คุณจะแสดงรายการที่มีการวนซ้ำบางประเภท

โดยทั่วไปวิธีการอาร์เรย์ JavaScript map()เป็นวิธีที่ต้องการ

หากคุณต้องการทบทวนmap()วิธีการ ตรวจสอบ ส่วนES6

ตัวอย่าง:

มาสร้างรถทุกคันจากโรงรถของเรากันเถอะ:

function Car(props) {
  return <li>I am a { props.brand }</li>;
}

function Garage() {
  const cars = ['Ford', 'BMW', 'Audi'];
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {cars.map((car) => <Car brand={car} />)}
      </ul>
    </>
  );
}

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

เมื่อคุณเรียกใช้รหัสนี้ใน ของคุณ รหัสcreate-react-appจะทำงาน แต่คุณจะได้รับคำเตือนว่าไม่มี "คีย์" สำหรับรายการ

w3schools CERTIFIED . 2022

ได้รับการรับรอง!

ทำโมดูล React ทำแบบฝึกหัด ทำข้อสอบ และได้รับการรับรองจาก w3schools!!

$95 ลงทะเบียน

กุญแจ

คีย์อนุญาตให้ React ติดตามองค์ประกอบ ด้วยวิธีนี้ หากมีการอัปเดตหรือลบรายการ เฉพาะรายการนั้นเท่านั้นที่จะถูกแสดงผลใหม่ แทนที่จะเป็นรายการทั้งหมด

คีย์ต้องไม่ซ้ำกันสำหรับพี่น้องแต่ละคน แต่สามารถทำซ้ำได้ทั่วโลก

โดยทั่วไป คีย์ควรเป็นรหัสเฉพาะที่กำหนดให้กับแต่ละรายการ วิธีสุดท้าย คุณสามารถใช้ดัชนีอาร์เรย์เป็นคีย์ได้

ตัวอย่าง:

มาปรับโครงสร้างตัวอย่างก่อนหน้าของเราเพื่อรวมคีย์:

function Car(props) {
  return <li>I am a { props.brand }</li>;
}

function Garage() {
  const cars = [
    {id: 1, brand: 'Ford'},
    {id: 2, brand: 'BMW'},
    {id: 3, brand: 'Audi'}
  ];
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {cars.map((car) => <Car key={car.id} brand={car.brand} />)}
      </ul>
    </>
  );
}

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

ทดสอบตัวเองด้วยแบบฝึกหัด

ออกกำลังกาย:

เพิ่มแอตทริบิวต์ที่ช่วยให้ React ติดตามองค์ประกอบในรายการ

function GroceryList() {
  const items = [
    {id: 1, name: 'bread'},
    {id: 2, name: 'milk'},
    {id: 3, name: 'eggs'}
  ];

  return (
    <>
      <h1>Grocery List</h1>
      <ul>
        {items.map((item) => <li ={item.id}>{item.name}</li>)}
      </ul>
    </>
  );
}

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

❮ ก่อนหน้า ถัดไป ❯