Stencil : JSX

by
Post Views: 139

Stencil component ใช้ JSX template syntax ในการกำหนดรูปแบบการแสดงผลที่จะถูก render ของ component  ซึ่งแต่ละ component จะมี render function ที่จะทำหน้าที่ return โครงสร้างของ component ที่จะเปลี่ยนเป็น DOM ตอน runtime เพื่อแสดงผลบนหน้าจอ

class MyComponent {
    render() {
       return (
          <div>
            <h1>Hello World</h1>
            <p>This is JSX!</p>
          </div>
       );
    }
}

จาก class Mycomponent ด้านบน render function จะ return div element ที่ภายในประกอบไปด้วย h1 และ p

Data Binding

เมื่อ component ต้องการที่จะ render ข้อมูลที่มีการเปลี่ยนแปลง dynamic data ทำได้โดยการ bindind ข้อมูลนั้นๆ โดยใช้ {variable}  (ซึ่งจะใกล้เคียงกับ ES6 template ที่ใช้ ${variable})

render() {
     return (
        <div>Hello {this.name}</div>
     )
}

Conditionals

เมื่อ component มีการแสดงผลที่ขึ้นอยู่กับเงื่อนไข สามารถใช้ JavaScript if/else statements ใน render function ดังเช่นตัวอย่างด้านล่างนี้ ถ้า this.name ไม่มีการกำหนดค่า จะแสดงผล “Hello, World”

render() {
    if (this.name) {
        return ( <div>Hello {this.name}</div> )
    } else {
        return ( <div>Hello, World</div> )
    }
}

หรือ จะเขียนในรูปแบบ inline conditionals ก็ได้เช่นกัน

render() { 
       return ( 
          <div> 
          {this.name 
               ? <p>Hello {this.name}</p> 
               : <p>Hello World</p> 
          } 
          </div> 
       ); 
}

Loops

ใน JSX สามารถใช้ array operators : map ในการทำงานแบบ loop  จากตัวอย่างด้านล่าง มี lists ของ todo object ใน this.Objects ซึ่ง map function ทำหน้าที่ loop ในแต่ละ todo object ใน this.Objects แล้วสร้าง new JSX sub tree และ add เข้าไปใน array ที่จะ return ออกจาก map function ซึ่งจะเพิ่มเข้าไปใน JSX tree ด้านนอกนั่นคือ div element

render() {
   return (
     <div>
       {this.todos.map((todo) =>
           <div>
             <div>{todo.taskName}</div>
             <div>{todo.isCompleted}</div>
           </div>
       )}
     </div>
  )
}

Handling User Input

Stencil สามารถใช้ native DOM events ได้ดังตัวอย่างด้านล่าง

export class MyComponent 
{ 
       handleClick(event: UIEvent) { 
            alert('Received the button click!'); 
       } 
       render() { 
           return ( 
              <button onClick={ (event: UIEvent) => this.handleClick(event)}>Click Me!               
              </button> 
           ); 
       } 
}

หรือจะเขียนในรูปแบบ  onClick={this.handleClick.bind(this)} ก็ได้เช่นกัน

  handleClick(event: UIEvent) {
    alert('Received the button click!');
  }

  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>Click Me!</button>
    );
  }

 

อ้างอิง : https://stenciljs.com/docs/templating-jsx