การใช้งาน prop ใน React.js นั้นจะเป็นการกำหนดค่า properties ต่างๆที่เราต้องการ โดย props นั้นจะใช้กับ component ใน react ซึ่งจะมี component 2 แบบคือ function component กับ class component ซึ่ง class component นั้นจะเป็นแบบเก่าดังเดิมของ React อยู่แล้วส่วน function component นั้นจะเป็น component แบบใหม่ที่จะเอามาตอบโจทย์การใช้งานแบบสั้นๆ และรูปแบบไม่ซับซ้อน อยู่ในรูปแบบ es 6 สามารถเขียนในรูปแบบ arrow function ได้เช่น

const Hello = ({name}) => Hello {name}

นอกจากนี้ function component นั้นยังอยู่ในรูปแบบที่ง่ายและสั้นแต่มีข้อจำกัดเรื่อง state และการกำหนดค่าเริ่มต้นที่ซับซ้อนเพราะฉะนั้นหาก component นั้นที่มีการใช้งาน state และ life cycle อยู่ก็แนะนำว่าให้ใช้ class component จะดีกว่า

เอาละเรามาดูตัวอย่างการเขียน function component และ class component กันดีกว่า

<body>
  <div id="root"></div>

  <script type="text/babel">
    const containerElem = document.getElementById('root');

    function FunctionalComponent() {
        return(
          <div>
            <h1>Functional Component</h1>
          </div>
        )
    }

    class ClassBasedComponent extends React.Component{
      render(){
        return ( 
          <div>
            <h1>Class Based Component </h1>
          </div>
        )
      }

    }

    class App extends React.Component{
      render(){
        return(
          <div>
            <FunctionalComponent/>
            <ClassBasedComponent />
          </div>
        )
      }
    }

    ReactDOM.render(<App />, containerElem)

  </script>
</body>

โดย code ตัวอย่างนี้จะเป็นแค่ในส่วน body tag นะครับส่วนโค้ดที่ include react กับ babel ไม่ได้เอามานะครับ สามารถ download code ตัวเต็มได้จาก link download code นะครับ

จาก code ผมทำการสร้าง function component ที่ชื่อว่า FunctionalComponent กับ class component ที่มีชื่อว่า ClassBasedComponent จากนั้นกำหนดให้ทั้งสองอันนี้เป็นส่วนประกอบของ component หลักที่ชื่อว่า App แล้วทำการ render ให้กับ element id root ก็จะได้ผลลัพธ์แบบรูปประกอบได้บนครับ

สังเกตว่า function component นั้นจะไม่มีการใช้ method render แบบ class component เพราะตัวมันเองก็เป็น function หรือ method แล้วจึงทำการ return ค่า JSX ออกมาเลย ไม่มี method อื่นอีกแล้ว ส่วน class component จะเป็นรูปแบบดังเดิมคือ extends React.Component แล้วใช้ method render นั้นเอง

ที่นี้จะมาดูวีธีการใช้งาน props ทั้ง function component กับ class component ดู

    function FunctionalComponent() {
      console.log('Functional Component')
      console.log(props)
        return(
          <div>
            <h1>Functional Component</h1>
          </div>
        )
    }

    class ClassBasedComponent extends React.Component{
      render(){
        console.log('Class Based')
        console.log(this.props)
        return ( 
          <div>
            <h1>Class Based Component </h1>
          </div>
        )
      }

    }

    class App extends React.Component{
      render(){
        const firstname = 'Thaicoding'
        return(
          <div>
            <FunctionalComponent firstname={firstname}/>
            <ClassBasedComponent firstname={firstname} />
          </div>
        )
      }
    }

จาก code เดิมผมทำการเพิ่มตัวแปร firstname ใน class App แล้วทำการ set ค่า props ที่มีชื่อว่า firstname ให้กับทั้ง FunctionComponent และ ClassBasedComponent

ซึ่งในการอ้างอิง props ใน function component นั้นจะใช้ props.ตามด้วยชื่อ props ทีกำหนดไว้ ส่วนใน class component นั้นจะใช้ this.props.ตามด้วยชื่อที่กำหนดไว้ ที่นี้จากโค้ดด้านบน จะเห็นว่าลอง console.log แสดงค่า props ออกมาแต่ปรากฎว่าใน FunctionComponent นั้นเกิด error

เหตุผลที่เป็นเช่นนี้ก็เพราะใน function component นั้นหากจะใช้งาน props ต้องทำการ set ให้มีการรับ parameter props ด้วย ซึ่งแก้ class FunctionComponent ใหม่เป็นดังนี้

    function FunctionalComponent(props) {
      console.log('Functional Component')
      console.log(props)
        return(
          <div>
            <h1>Functional Component</h1>
          </div>
        )
    }

เมื่อแก้โค้ดเสร็จจะเห็นว่า เมื่อ console.log ออกมาจะมี properties ที่ชื่อว่า firstname ที่เรากำหนดไว้ให้ใน class App นั้นเอง

และอีกอย่างคือค่า props นั้นจะเป็นแบบ readonly แก้ไข้ค่าใน function หรือ class component ไม่ได้นะครับ

ที่นี้เราลองมา render ค่า props ทั้งใน function และ class component ดู

<body>
  <div id="root"></div>

  <script type="text/babel">
    const containerElem = document.getElementById('root');

    function FunctionalComponent(props) {
        return(
          <div>
            <h1>Functional Component {props.firstname}</h1>
          </div>
        )
    }

    class ClassBasedComponent extends React.Component{
      render(){
        return ( 
          <div>
            <h1>Class Based Component {this.props.firstname}</h1>
          </div>
        )
      }

    }

    class App extends React.Component{
      render(){
        const firstname = 'Thaicoding'
        return(
          <div>
            <FunctionalComponent firstname={firstname}/>
            <ClassBasedComponent firstname={firstname} />
          </div>
        )
      }
    }

    ReactDOM.render(<App />, containerElem)

  </script>
</body>

จากโค้ดก็จะเห็นว่าเราก็ใช้รูปแบบการอ้างอิง props ตามที่เคยบอกไว้แล้ว ส่วนในการ แสดงค่านั้นก็จะใช้ {} เหมือนในโค้ดด้านบนครับ

เมื่อลองรันดูก็จะได้รูปแบบนี้ครับ

ทั้งหมดนี้ก็เป็นตัวอย่างการใช้งาน function component กับ class component และการกำหนดค่า props รวมไปถึงการอ้างถึงค่า props ใน component เบื้องต้น ผมของจบโพสไว้แค่นี้นะครับสามารถ download code จาก link ด้านล่าง แล้วไว้พบกันใหม่ในโพสต่อๆไปนะครับ

Dowload Code

Leave a Reply

Your email address will not be published. Required fields are marked *