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

 

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 14 พฤศจิยน 2561
โดย tatiya พ 14 พ.ย. 2018 9:39 am บอร์ด M065 - ตติยะ นาชัย
0
1
พ 14 พ.ย. 2018 9:39 am โดย tatiya
งานประจำวันที่ 14 พฤศจิกายน 2561
โดย prakon พ 14 พ.ย. 2018 9:35 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
0
1
พ 14 พ.ย. 2018 9:35 am โดย prakon
อัพโหลดไฟล์ ผ่าน FTP ด้วย Python ง่ายๆ 5 บรรทัดก็ย้ายไฟล์ไปยัง Server ปลายทางได้แล้ว
โดย mindphp พ 14 พ.ย. 2018 9:34 am บอร์ด Python Knowledge
0
6
พ 14 พ.ย. 2018 9:34 am โดย mindphp
งานประจำวันที่ 14 พฤศจิกายน 2561
โดย nice_13 พ 14 พ.ย. 2018 9:31 am บอร์ด M071 - พิชญ์สินี คงจร
0
1
พ 14 พ.ย. 2018 9:31 am โดย nice_13
งานประจำวันที่ 14 พฤษจิกายน 2561
โดย Ittichai_chupol พ 14 พ.ย. 2018 9:21 am บอร์ด M070 - อิทธิชัย ชูผล
0
1
พ 14 พ.ย. 2018 9:21 am โดย Ittichai_chupol
งานประจำวันที่ 14 พฤศจิกายน 2561
โดย tai14 พ 14 พ.ย. 2018 8:09 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
0
1
พ 14 พ.ย. 2018 8:09 am โดย tai14
งานประจำวันที่ 13 พฤศจิกายน 2561
โดย tai14 พ 14 พ.ย. 2018 8:09 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
0
1
พ 14 พ.ย. 2018 8:09 am โดย tai14
งานประจำวันที่ 14 พฤศจิกายน 2561
โดย pprn พ 14 พ.ย. 2018 8:08 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
1
พ 14 พ.ย. 2018 8:08 am โดย pprn
รายงานปัญหาที่ต้องแก้ไขใน RTP
โดย pprn อ 13 พ.ย. 2018 6:24 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
4
อ 13 พ.ย. 2018 6:24 pm โดย pprn
งานประจำวันที่ 13 พฤศจิกายน 2561
โดย prakon อ 13 พ.ย. 2018 10:00 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
7
อ 13 พ.ย. 2018 10:55 pm โดย prakon
งานประจำวันที่ 13 พฤศจิกายน 2561
โดย Ittichai_chupol อ 13 พ.ย. 2018 8:31 am บอร์ด M070 - อิทธิชัย ชูผล
0
3
อ 13 พ.ย. 2018 8:31 am โดย Ittichai_chupol
งานประจำวันที่ 13 พฤษจิกายน 2561
โดย tatiya อ 13 พ.ย. 2018 8:30 am บอร์ด M065 - ตติยะ นาชัย
0
3
อ 13 พ.ย. 2018 8:30 am โดย tatiya
งานประจำวันที่ 13 พฤศจิกายน 2561
โดย nice_13 อ 13 พ.ย. 2018 8:30 am บอร์ด M071 - พิชญ์สินี คงจร
2
4
อ 13 พ.ย. 2018 5:58 pm โดย nice_13
งานประจำวันที่ 13 พฤศจิกายน 2561
โดย pprn อ 13 พ.ย. 2018 8:27 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
2
อ 13 พ.ย. 2018 8:27 am โดย pprn
B - ปรับเปลี่ยนเทมเพลต เป็นแบบ phpbb
โดย Ittichai_chupol อ 13 พ.ย. 2018 1:03 am บอร์ด ThaiVI - Tester
0
2
อ 13 พ.ย. 2018 1:03 am โดย Ittichai_chupol
B - เพิ่มเเบ่งหน้า ใน extension กระทู้สมาชิก
โดย Ittichai_chupol อ 13 พ.ย. 2018 12:24 am บอร์ด ThaiVI - Tester
0
1
อ 13 พ.ย. 2018 12:24 am โดย Ittichai_chupol
งานประจำวันที่ 12 พฤศจิกายน 2561
โดย prakon จ 12 พ.ย. 2018 4:19 pm บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
9
จ 12 พ.ย. 2018 6:35 pm โดย prakon
งานประจำวันที่ 12 พฤศจิกายน 2561
โดย tai14 จ 12 พ.ย. 2018 4:07 pm บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
0
3
จ 12 พ.ย. 2018 4:07 pm โดย tai14
งานประจำวันที่ 12 พฤศจิกายน 2561
โดย nice_13 จ 12 พ.ย. 2018 4:01 pm บอร์ด M071 - พิชญ์สินี คงจร
0
3
จ 12 พ.ย. 2018 4:01 pm โดย nice_13
R - Email เเจ้งเตือนเมื่อ ลง lead
โดย thatsawan จ 12 พ.ย. 2018 2:13 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
1
จ 12 พ.ย. 2018 2:13 pm โดย thatsawan