React（三）

动态控制显示和css

import { useState } from "react";
import "./index.css";
const list = [{ id: 1, username: "aaName", content: "一条评论", ctime: "10-18 08:15" },{ id: 2, username: "bbName", content: "2条评论", ctime: "10-18 08:15" },{ id: 3, username: "ccName", content: "3条评论", ctime: "10-18 08:15" },{ id: 4, username: "ddName", content: "5条评论", ctime: "10-18 08:15" },
];
const user = { id: 2, username: "master" };
const HOT = [{ type: "hot", name: "最热" },{ type: "new", name: "最新" },
];
function App() {const [commitList, setCommitList] = useState(list);const [type, setType] = useState("hot");// 删除按钮function handleClick(id) {console.log(id);setCommitList(commitList.filter((item) => item.id !== id));}function changeType(id) {setType(id);console.log(type);}return (<div className="App"><div>{HOT.map((item) => (<spankey={item.type}onClick={() => changeType(item.type)}className={`${type === item.type && "active"}`}>{item.name}</span>))}</div><input></input><button>发送</button>{commitList.map((item) => (<div key={item.id} style={{ borderBottom: " solid 1px", width: "400px" }}><p> 用户{item.username}</p><p> 评论{item.content}</p><p> 时间{item.ctime}</p>{/* 只有满足时候才会显示删除按钮 */}{user.id == item.id && <button onClick={() => handleClick(item.id)}>删除按钮</button>}</div>))}</div>);
}export default App;

1、遍历展示评论列表

2、条件控制展示自己的删除按钮

3、点击删除，动态展示更新后数据（不重要 一般后端接口控制）

4、动态控制css样式

主要记住使用条件语句 和模板字符串

 {commitList.map((item) => (<div key={item.id}style={{ borderBottom: " solid 1px", width: "400px" }}
><p> 用户{item.username}</p><p> 评论{item.content}</p><p> 时间{item.ctime}</p>{/* 只有满足时候才会显示删除按钮 */}{user.id == item.id && <button onClick={() => handleClick(item.id)}>
删除按钮</button>}</div>))}

  className={`xxcss   xxx   active1   ${type === item.type && "active"}`}

优化

使用classname插件 GitHub - JedWatson/classnames: A simple javascript utility for conditionally joining classNames together

npm install classnames

使用

className={`${type === item.type && "active"}`}

优化

 className={classNames({active:type===item.type},'box')}