ให้เรตสมาชิก: 4 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งาน
 

Function และ Class Components

     Component คือ UI ที่เราแบ่งมันออกเป็นส่วนๆ มีข้อดีในเรื่องของการ แก้ไขโค้ดเฉพาะจุด เวลาใช้งานจะใช้คำสั่งเรียกแต่ละ Component มารวมกันใน Page เดียว

     วิธีง่ายๆ ในการ กำหนด Component คือการเขียนฟังก์ชั่น JavaScript :

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

      ถ้าเขียนแบบ ES6 จะได้หน้าตาแบบนี้ :

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

การแสดงผลของ Component และ Props

     ก่อนหน้านี้เราได้ พูดถึง Element ของ DOM ซึ่งมีหน้าตาแบบนี้ :

const element = <div />;

     และ Elements ก็สามารถแสดงค่าตามที่เรากำหนดได้เช่นกัน :

const element = <Welcome name="Mindphp" />;

    

     เมื่อ Element ที่เป็นตัวแทนของ Component จะส่งค่าผ่าน Attibute JSX ไปอีก Component หนึ่ง จะต้องมีตัวแปรหนึ่งที่มากรับค่ามันไว้ เราเรียนตัวแปรนี้ว่า Props         

     Example โค้ดนี้จะแสดงค่า "Hello, Mindphp" :

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Mindphp" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

สรุปจากตัวอย่าง

  • เราเรียก ReactDOM.render() ด้วย Element <Welcome name="Mindphp" />

  • มีการตอบสนองการเรียก Component Welcome ด้วย Props {name: 'Mindphp'}

  • Component Welcome จะแสดง Element <h1>Hello, Mindphp</h1> ออกมาเป็นผลลัพธ์

 

อ้างอิงข้อมูล : https://reactjs.org

 

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
อยากให้ธุรกิจเป็นที่รู้จักบนโลกออนไลน์ ลองหาบริษัทรับทำ SEO ดูซิ !
โดย totheworld จ 17 ก.พ. 2020 3:34 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
23
จ 17 ก.พ. 2020 3:34 pm โดย totheworld
สี่เหตุผลที่ควรปรับปรุงเว็บไซต์
โดย phasamon จ 17 ก.พ. 2020 2:05 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
13
จ 17 ก.พ. 2020 2:05 pm โดย phasamon
อย่าได้พลาดเชียว
โดย noppadonsk จ 17 ก.พ. 2020 10:52 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
5
จ 17 ก.พ. 2020 10:52 am โดย noppadonsk
วิธีการแก้ไขปํญหา undefined index กรณีกำหนดเงือนไขเทียบค่าอาร์เรย์
โดย Ittichai_chupol ศ 14 ก.พ. 2020 5:50 pm บอร์ด PHP Knowledge
0
50
ศ 14 ก.พ. 2020 5:50 pm โดย Ittichai_chupol
เรื่องน่าเศร้า
โดย noppadonsk ศ 14 ก.พ. 2020 10:19 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
46
ศ 14 ก.พ. 2020 10:19 am โดย noppadonsk
อยากทรบวิธีจัดการไม่ให้สมาชิกที่อยู่ในกลุ่มที่กำหนดมาส่องโพสต์ของผู้อื่นได้
โดย Ittichai_chupol พฤ 13 ก.พ. 2020 3:22 pm บอร์ด Programming - PHP
3
63
พฤ 13 ก.พ. 2020 5:31 pm โดย thatsawan
กลับไปเริ่มใหม่
โดย noppadonsk พฤ 13 ก.พ. 2020 10:57 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
37
พฤ 13 ก.พ. 2020 10:57 am โดย noppadonsk
อยากทราบการเอาเลขมาคุณในช่อง 10อัน แล้วมาแล้วผลข้างล่างครับ
โดย comopal พ 12 ก.พ. 2020 6:49 pm บอร์ด Programming - PHP
1
62
พฤ 13 ก.พ. 2020 9:39 am โดย LEG
ต้องรีบเดี๋ยวลืม
โดย noppadonsk พ 12 ก.พ. 2020 10:56 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
37
พ 12 ก.พ. 2020 10:56 am โดย noppadonsk
วิธีการเลือกงาน
โดย jataz2 พ 12 ก.พ. 2020 9:47 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
46
พ 12 ก.พ. 2020 9:47 am โดย jataz2
วิธีการไปสัมภาษณ์งาน
โดย jataz2 พ 12 ก.พ. 2020 9:25 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
43
พ 12 ก.พ. 2020 9:25 am โดย jataz2
วิธีการ insert ข้อมูลในขั้นตอนติดตั้ง Extension phpbb
โดย Ittichai_chupol อ 11 ก.พ. 2020 5:55 pm บอร์ด PHP Knowledge
1
41
อ 11 ก.พ. 2020 6:01 pm โดย thatsawan
visual studio 2008 crystal reports viewer มี ในToolbox แต่ใช้งานไม่ได้
โดย d.direk อ 11 ก.พ. 2020 2:33 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
44
อ 11 ก.พ. 2020 2:33 pm โดย d.direk
การเดินทางจากปลวกแดง (ระยอง)- กรุงเทพฯ
โดย panudda อ 11 ก.พ. 2020 12:07 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
37
อ 11 ก.พ. 2020 12:07 pm โดย panudda
จะหยามกันเกินไปแล้ว
โดย noppadonsk อ 11 ก.พ. 2020 11:19 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
43
อ 11 ก.พ. 2020 11:19 am โดย noppadonsk
อยู่ห้องเช่าหรือคอนโดก็ทำอาหารได้เมนูง่ายๆ อยากแชร์ค่ะ
โดย Anonymous อ 09 ก.พ. 2020 5:39 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
92
อ 09 ก.พ. 2020 5:39 pm โดย บุคคลทั่วไป
FLIR AX8-9Hz กล้องถ่ายภาพความร้อนแบบต่อเนื่อง | IP67
โดย LEG ศ 07 ก.พ. 2020 2:39 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
88
ศ 07 ก.พ. 2020 2:39 pm โดย LEG
คัดกรองคนมีไข้ด้วยกล้องถ่ายภาพความร้อน | Thermal Imaging Camera
โดย LEG ศ 07 ก.พ. 2020 1:27 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
54
ศ 07 ก.พ. 2020 1:27 pm โดย LEG
สอบถามการใช้ selenium บน ubuntu หน่อยครับ
โดย jirawoot ศ 07 ก.พ. 2020 10:52 am บอร์ด Programming - C/C++ & java & Python
2
99
ศ 07 ก.พ. 2020 1:22 pm โดย jirawoot
อย่าคิดว่าง่ายๆนะ
โดย noppadonsk ศ 07 ก.พ. 2020 9:23 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
64
ศ 07 ก.พ. 2020 9:23 am โดย noppadonsk