React JSX基本用法

骑猪看日落 2023-07-09 09:28 97阅读 0赞

> 数据绑定、双向数据绑定、路由跳转、事件、数据遍历、渲染、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;