วิธีใช้วิธีการแผนที่ในการโต้ตอบ

ในการตอบสนอง วิธีการ map ใช้เพื่อสำรวจและแสดงรายการวัตถุที่คล้ายกันของส่วนประกอบ วิธีการ map นั้นไม่ซ้ำกันในการตอบสนองและสามารถเรียกใช้ฟังก์ชัน JavaScript มาตรฐานบนอาร์เรย์ใดก็ได้ อาร์เรย์การเรียกเพื่อสร้างอาร์เรย์

สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows 10, รีแอคเวอร์ชัน 17.0.1, คอมพิวเตอร์ Dell G3

วิธีใช้วิธีการแผนที่ในการโต้ตอบ

แผนที่เป็นประเภทการรวบรวมข้อมูลซึ่งข้อมูลจะถูกจัดเก็บในรูปแบบของคู่ ประกอบด้วยคีย์เฉพาะซึ่งจะต้องแมปค่าที่เก็บไว้ในแผนที่ เราไม่สามารถจัดเก็บคู่ที่ซ้ำกันใน map() ได้ เนื่องจากคีย์ที่เก็บไว้แต่ละคีย์ไม่ซ้ำกัน และส่วนใหญ่จะใช้สำหรับการค้นหาและค้นหาข้อมูลอย่างรวดเร็ว

ใน React วิธีการ map ใช้ในการวนซ้ำและแสดงรายการของวัตถุที่คล้ายกันในส่วนประกอบ map ไม่ได้เฉพาะเจาะจงกับ React แต่เป็นฟังก์ชัน JavaScript มาตรฐานที่สามารถเรียกใช้ในอาร์เรย์ใดก็ได้ map() วิธีการสร้างอาร์เรย์ใหม่โดยการเรียกใช้ฟังก์ชันที่มีให้ในแต่ละองค์ประกอบในอาร์เรย์ที่เรียก

ตัวอย่าง

ในตัวอย่างที่กำหนด ฟังก์ชัน map() ยอมรับอาร์เรย์ของตัวเลขและเพิ่มค่าเป็นสองเท่า เราจะกำหนดอาร์เรย์ใหม่ที่ส่งกลับโดย map() ให้กับตัวแปร doubleValue แล้วบันทึกมัน

var ตัวเลข = [1, 2, 3, 4, 5]; const doubleValue = number.map((number)=>{ return (number * 2); });

ใน React เมธอด map() ใช้สำหรับ:

1. สำรวจองค์ประกอบรายการ

ตัวอย่าง

นำเข้า React จาก 'react'; นำเข้า ReactDOM จาก 'react-dom'; function NameList(props) { const myLists = props.myLists; > ); return ( <div> <h2>แสดงตัวอย่างแผนที่</h2> <ul>{listItems}</ul> </div> } const myLists = ['A', 'B', 'C' , 'D', 'D']; ReactDOM.render( <NameList myLists={myLists} />, document.getElementById('app') );

2. สำรวจองค์ประกอบรายการตามคีย์

ตัวอย่าง

นำเข้า React จาก 'react'; นำเข้า ReactDOM จาก 'react-dom'; function ListItem(props) { return <li>{props.value}</li>; const listItems = number.map((number) => <ListItem key={number.toString()} value={number} /> ); return ( <div> <h2>แสดงตัวอย่างแผนที่</h2> <ul> {listItems} </ul> </div> ); } const ตัวเลข = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList number={numbers} />, document.getElementById('app' ) );