React JSX基本用法

数据绑定、双向数据绑定、路由跳转、事件、数据遍历、渲染、HTML解析、注释

import React, { Component, Fragment } from 'react';

class Demo extends Component<any, any> {

  // 构造函数
  constructor(props: any) {
    super(props);
    // 数据绑定
    this.state = {
      msg: 'Hello World, This is Demo Template!',
      value: '',
      data: []
    };
  }

  // 双向数据绑定
  public changeValue(e: any): void {
    this.setState({
      value: e.target.value,
    });
  }

  // 添加
  public addValue(): void {
    this.setState({
      data: [...this.state.data, this.state.value],
      value: '',
    });
  }

  // 删除
  public deleteItem(i: number): void {
    let data: any = this.state.data;
    data.splice(i, 1);
    this.setState({
      data: data,
    })
  }

  render(): any {
    return (
      // 代码注释方式
      <Fragment>
        {/*代码注释方式*/}
        <div className="">
          <span>{ this.state.msg }</span>
          <button onClick={() => this.props.history.push('/')}>返回</button>
        </div>
        <div className="">
          <label htmlFor="addValue">请输入：</label>
          <input type="text" id="addValue" value={ this.state.value } onChange={e => this.changeValue(e)} />
          <button onClick={() => this.addValue()}>添加</button>
          <ul>
            {
              this.state.data.map((item: string, index: number) => {
                return (
                  // dangerouslySetInnerHTML 用于解析html
                  <li key={ index+item } onClick={() => this.deleteItem(index)} dangerouslySetInnerHTML={{__html: item}} />
                )
              })
            }
          </ul>
        </div>
      </Fragment>
    );
  }
}

export default Demo;