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 (
    

      

        {HOT.map((item) => (
           changeType(item.type)}
            className={`${type === item.type && "active"}`}
          >
            {item.name}
          
        ))}
      
      
      发送
      {commitList.map((item) => (
        

          
 用户{item.username}
          
 评论{item.content}
          
 时间{item.ctime}
          {/* 只有满足时候才会显示删除按钮 */}
          {user.id == item.id &&  handleClick(item.id)}>删除按钮}
        
      ))}
    
  );
}

export default App;

1、遍历展示评论列表

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

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

4、动态控制css样式

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

 {commitList.map((item) => (
        

          
 用户{item.username}
          
 评论{item.content}
          
 时间{item.ctime}
          {/* 只有满足时候才会显示删除按钮 */}
          {user.id == item.id &&  handleClick(item.id)}>
删除按钮}
        
      ))}

  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')}