react学习day3

最新推荐文章于 2024-07-19 11:34:13 发布

阿芯爱编程

最新推荐文章于 2024-07-19 11:34:13 发布

阅读量40

点赞数

分类专栏： js技巧文章标签： react.js 学习前端

本文链接：https://blog.csdn.net/github_36510643/article/details/134361849

版权

js技巧专栏收录该内容

12 篇文章 0 订阅

订阅专栏

评论列表开发，useState的使用，map，filter的使用

import React, { useState } from 'react';
import './App.css'
function App() {
  const list=[
    {name:'test1',img:'https://t7.baidu.com/it/u=963301259,1982396977&fm=193&f=GIF',content:'very good'},
    {name:'test2',img:'https://t7.baidu.com/it/u=963301259,1982396977&fm=193&f=GIF',content:'ok'},
    {name:'test3',img:'https://t7.baidu.com/it/u=963301259,1982396977&fm=193&f=GIF',content:'very bad'},
  ]
  const [clist,setClist]=useState(list)
  const content={
    background:'gray',
    color:'white',
    margin:'10px 0',
    padding:'10px 0'
  }
  const name={
    background:'blue',
    color:'white',
    width:'50px'
  }
  const box={
    border:'1px solid',
    margin:'10px'
  }
  const use={id:1}
  const [use1]=useState(use)
  const deletebtn=(vv)=>{
    console.log(vv)
    setClist(clist.filter((v,i)=>i!=vv))
  }
  const tabs=[
    {type:'text',name:'news'},
    {type:'time',name:'time'},
  ]
  const [type,setType]=useState('text')
 const tabc=(type)=>{
  console.log(type)
  setType(type)
 }
 const active={
  color:'red'
 }
  return (
    <div>
      <div>
        {tabs.map(v=><span  className={`${v.type===type&&'active'}`} onClick={()=>tabc(v.type)} key={v.type}>{v.name}</span>)}
      </div>
      {clist.map((v,i)=>(
        <div key={i} style={box}>
          <div className='img'>
            <img src={v.img} alt='img' style={{height:'20px',width:'20px',borderRadius:'50%'}}></img>
          </div>
          <div className='content' style={content}>
            {v.content}
          </div>
          <div className='name' style={name}>
            {v.name}
          </div>
          {use1.id==i && <span onClick={()=>deletebtn(i)}>delete</span>}
        </div>
      ))}
    </div>
  );
}
export default App;