stenciljs 學習九 使用jsx

能夠使用jsx 方便組件的開發

基本格式

主要是render 函數

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

數據綁定

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

條件語句

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

slots

參考

render() {
  return (
    <div>
      <h2>A Component</h2>
      <div><slot /></div>
    </div>
  );
}

對於多個能夠指定名稱
參考

render(){
  return [
    <slot name="item-start" />,
    <h1>Here is my main content</h1>,
    <slot name="item-end" />
  ]
}

render(){
  return(
    <my-component>
      <p slot="item-start">I'll be placed before the h1</p>
      <p slot="item-end">I'll be placed after the h1</p>
    </my-component>
  )
}

loops 操做

參考

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

處理用戶輸入事件

使用原生dom 事件
參考

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

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

獲取dom 元素的引用

使用ref 進行參數綁定
參考

@Component({
  tag: 'app-home',
})
export class AppHome{

  textInput: HTMLInputElement;

  handleSubmit = (ev: Event) => {
    ev.preventDefault();
    console.log(this.textInput.value);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(el: HTMLInputElement) => this.textInput = el} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

參考資料

https://stenciljs.com/docs/templating-jsx