03-初学react

3.1循环遍历数组的数据，并显示到页面当中

import React, { Component } from 'react' //导入react,component
​
export default class APP extends Component {
  //在state里面定义一个list数组，list里面的每一项都是一个对象，其中ID作为key，text作为内容
    state = {
        list:[{
            id:1,
            text:111
        },
        {
            id:2,
            text:222
        },
        {
            id:3,
            text:333
        }
    ]
    }
  render() {
    //在return外面声明一个newlist变量作为渲染数据，便于拆分复用
     let newlist =  this.state.list.map((item)=>{ //map方法遍历list中的每一项
        return (<div key={item.id}>{item.text}</div>) //渲染每一项的内容
       })
    return (
      <div>
         {
            newlist //渲染list数据
         }
      </div>
    )
  }
}

3-2todolist小案例

实现增加和删除功能

import React, { Component } from 'react'
import { nanoid } from 'nanoid'//这里先安装一个nanoid随机数插件，npm i nanoid安装即可，然后导入该插件
export default class APP extends Component {
    myref = React.createRef()//创建ref,赋值给myref
 //在state里面定义一个list数组，list里面的每一项都是一个对象，其中ID作为key，text作为内容
    state = {
        list: [{
            id: nanoid(),
            text: '张三'
        },
        {
            id: nanoid(),
            text: '李四'
        },
        {
            id: nanoid(),
            text: '王五'
        }]
    }
    render() {
       //在return外面声明一个list1变量作为渲染数据，便于拆分复用
        let list1 = this.state.list.map((item, i) =>//map方法遍历list中的每一项,item是每一项，i是每一项索引值
            <div key={item.id}>{item.text}//id作为key，text作为内容
             <button onClick={() => {//删除按钮
                this.del(i)//删除方法，把索引值传过去
            }}></button></div>
​
        )
        return (
            <div>
                <input ref={this.myref}></input> //绑定标签
                <button onClick={() => { //增加按钮
                    this.add() //增加方法
                }}>
                </button>
                {
                    list1 //渲染list数据
                }
            </div>
        )
    }
    //add(增加)方法
    add = () => {
        let list2 = [...this.state.list] //拷贝list的数据，不影响原有的list数据
        //把搜索框显示的值添加到list2中
        list2.push({
            id: nanoid(), //随机id
            text: this.myref.current.value //搜索框显示的值
        })
        this.setState({
            list: list2 //更新list
        })
        this.myref.current.value = '' //清空搜索框
    }
    //del(删除)方法
    del = (i) => { //接收传过来的索引值
        let list3 = [...this.state.list]//拷贝list的数据，不影响原有的list数据
        list3.splice(i, 1) //删除掉想要点击删除的值
        this.setState({
            list: list3 //更新list
        })
    }
}

具体结果呈现如下

3-3table选项卡高亮

import React, { Component } from 'react'
import { nanoid } from 'nanoid' //引入nanoid随机数插件
import './css/09-table.less' //引入less
​
export default class APP extends Component {
  //在state里面定义一个list数组，list里面的每一项都是一个对象，其中ID作为key，text作为内容
    state = {
        list: [{
            id: nanoid(),
            text: '零食'
        },
        {
            id: nanoid(),
            text: '潮玩'
        },
        {
            id: nanoid(),
            text: '化妆品'
        }],
        flog:0
    }
  render() {
      let list = this.state.list.map((item,i)=>//map方法遍历list中的每一项,item是每一项，i是每一项索引值
       <div onClick={()=>{ //点击事件
         this.change(i) //点击方法，把索引值i传过去
       }} key={item.id} className={[`${this.state.flog===i?'active':''}`,`card`].join(' ') }>{item.text}</div> //判断i和flog值是否相等，相等就产生高亮效果
      )
    return (
      <div className='box'>
       {
         list//渲染list数据
       }
​
      </div>
    )
  }
  //点击方法
  change(i){
   this.setState({
     flog:i //让flog=i
   })
  }
}

效果如下：

有感兴趣的小伙伴，可以加我微信Leyman233，加入我建的一个小群，一起交流前端知识！