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) => (
          <span
            key={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')}