【REACT中的状态（state）、列表渲染（map）、条件判断和标签解析（dangerouslySetInnerHTML），例子：ToDoList】

import React, { Component,createRef } from 'react'
import ReactDOM from "react-dom";
export default class ToDoList extends Component {
  constructor(){//构造器
  	  //子类必须调用super()
      super();//super 调用了父类（Component）的构造函数来去实例化子类本身,可以向父级传参
      //必须加this
      this.myref = createRef()

      this.state = {
      todoList:[11,22,33]
    }
  }
  //外部变量可以直接写
  // myref = createRef()

  // state = {
  //   todoList:[11,22,33]
  // }
  render() {
    return (
      <div>
        <input ref={this.myref}></input>
        <button onClick={()=> this.add()}>添加</button>
        <ul>
          {this.state.todoList.map((item,index) =>  {
            return (
              <li key={index} >
                {/*dangerouslySetInnerHTML的作用相当于VUE中的v-html*/}
                <span dangerouslySetInnerHTML={{__html:item}}></span>{/*数据需要进行删除和添加的话，key最好是使用唯一辨识值id*/ }
                <button onClick={()=>this.del(index)}>del</button>
              </li>
            )
          })}
        </ul>

        {this.state.todoList.length === 0 && <div>暂无待办事项2</div>}//第一个条件为真才会执行后面的条件，否则不执行

        {this.state.todoList.length === 0?<div>暂无待办事项1</div>:null}

        <div>{this.state.todoList.length === 0 && '暂无待办事项3'}</div>
        
      </div>
    )
  }
  add(){
    let newList = [...this.state.todoList];//尽量不要直接更改原对象
    newList.push(this.myref.current.value);
    this.setState({todoList:newList});
  }
  del(index){
    //浅克隆
    // let newList = this.state.todoList.concat();
    let newList = this.state.todoList.slice();
    newList.splice(index,1);
    this.setState({todoList:newList});
  }
}

ReactDOM.render(
  // <React.StrictMode>
    <ToDoList></ToDoList>
  // <ToDoList/>
  // </React.StrictMode>
  ,document.getElementById('root'))