ให้เรตสมาชิก: 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

 

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การเชื่อม Pgadmin III กับ SSL Certificate ให้กับ Website ผ่าน DirectAdmin อย่างไร
โดย kkeinezung ส 22 ก.ย. 2018 6:54 pm บอร์ด SQL - Database
0
3
ส 22 ก.ย. 2018 6:54 pm โดย kkeinezung
R - phpBB
โดย Ittichai_chupol ส 22 ก.ย. 2018 6:51 pm บอร์ด M070 - อิทธิชัย ชูผล
0
3
ส 22 ก.ย. 2018 6:51 pm โดย Ittichai_chupol
เขาวัง สิ่งคู่บ้านเพชรบุรี
โดย Ittichai_chupol ส 22 ก.ย. 2018 3:52 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
10
ส 22 ก.ย. 2018 3:52 pm โดย Ittichai_chupol
งานประจำวันที่ 22 กันยายน 2561
โดย muneela ส 22 ก.ย. 2018 10:38 am บอร์ด M068 - มุนีลา หมัดบาซา
1
5
ส 22 ก.ย. 2018 7:17 pm โดย muneela
งานประจำวันที่ 22 กันยายน 2561
โดย tatiya ส 22 ก.ย. 2018 10:02 am บอร์ด M065 - ตติยะ นาชัย
1
4
ส 22 ก.ย. 2018 7:45 pm โดย tatiya
งานประจำวันที่ 22 มิถุนายน 2561
โดย Ittichai_chupol ส 22 ก.ย. 2018 9:50 am บอร์ด M070 - อิทธิชัย ชูผล
1
9
ส 22 ก.ย. 2018 7:16 pm โดย Ittichai_chupol
R-mdsoft_purchases_order_print
โดย tatiya ศ 21 ก.ย. 2018 7:02 pm บอร์ด M065 - ตติยะ นาชัย
1
8
ส 22 ก.ย. 2018 7:05 pm โดย tatiya
Logo ThailandHotel
โดย tai14 ศ 21 ก.ย. 2018 3:53 pm บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
0
6
ศ 21 ก.ย. 2018 3:53 pm โดย tai14
Thaivi Web Upgrade List
โดย mindphp ศ 21 ก.ย. 2018 1:55 pm บอร์ด phpBB3 Project
2
5
ส 22 ก.ย. 2018 5:10 pm โดย thatsawan
R - mdsoft_ziri_invoice_print - ใบอินวอยซ์ (MT24)
โดย prakon ศ 21 ก.ย. 2018 10:15 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
11
ศ 21 ก.ย. 2018 7:05 pm โดย prakon
งานประจำวันที่ 21 กันยายน 2561
โดย prakon ศ 21 ก.ย. 2018 9:44 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
17
ศ 21 ก.ย. 2018 9:46 am โดย prakon
งานประจำวันที่ 21 กันยายน 2561
โดย Ittichai_chupol ศ 21 ก.ย. 2018 9:44 am บอร์ด M070 - อิทธิชัย ชูผล
1
13
ศ 21 ก.ย. 2018 6:29 pm โดย Ittichai_chupol
งานประจำวันที่ 21 กันยายน 2561
โดย muneela ศ 21 ก.ย. 2018 9:37 am บอร์ด M068 - มุนีลา หมัดบาซา
1
13
ศ 21 ก.ย. 2018 6:26 pm โดย muneela
งานประจำวันที่ 21 กันยายน 2561
โดย tatiya ศ 21 ก.ย. 2018 9:35 am บอร์ด M065 - ตติยะ นาชัย
1
6
ส 22 ก.ย. 2018 7:17 pm โดย tatiya
งานประจำวันที่ 21 กันยายน 2561
โดย pprn ศ 21 ก.ย. 2018 9:17 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
8
ศ 21 ก.ย. 2018 6:12 pm โดย pprn
งานประจำวันที่ 21 กันยายน 2561
โดย tai14 ศ 21 ก.ย. 2018 9:11 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
1
6
ศ 21 ก.ย. 2018 6:18 pm โดย tai14
R - mod_jshopping_products_reviews โมดูลการรีวิวสินค้า
โดย pprn พฤ 20 ก.ย. 2018 6:58 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
2
9
ศ 21 ก.ย. 2018 6:12 pm โดย pprn
phpbb ติดตั้งภาษาไทยไม่ได้
โดย Ittichai_chupol พฤ 20 ก.ย. 2018 6:52 pm บอร์ด Programming - PHP
3
38
ศ 21 ก.ย. 2018 11:09 am โดย Ittichai_chupol
R-mdsoft_create_generate_opening_entries
โดย tatiya พฤ 20 ก.ย. 2018 6:36 pm บอร์ด M065 - ตติยะ นาชัย
1
8
พฤ 20 ก.ย. 2018 9:42 pm โดย tatiya
R-mdsoft_change_product_type_stockable
โดย tatiya พฤ 20 ก.ย. 2018 6:32 pm บอร์ด M065 - ตติยะ นาชัย
1
8
พฤ 20 ก.ย. 2018 9:08 pm โดย tatiya