React(8)

封装评论列表的Item组件 实现父传子以及子组件调用父组件方法

javascript 复制代码
import { useEffect, useState } from "react";
import "./index.css";
import _ from "lodash";
import classNames from "classnames";
import axios from "axios";
const list = [
  { id: 1, username: "aaName", content: "一条评论", ctime: "10-17 05:15", number: 4 },
  { id: 2, username: "bbName", content: "2条评论", ctime: "10-14 05:15", number: 56 },
  { id: 3, username: "ccName", content: "3条评论", ctime: "11-17 05:15", number: 433 },
  { id: 4, username: "ddName", content: "5条评论", ctime: "12-12 05:15", number: 3333 },
];
const user = { id: 2, username: "master" };
const HOT = [
  { type: "hot", name: "最热" },
  { type: "new", name: "最新" },
];
// 创建use开头的hooks函数  因为getlist函数直接调用了并且使用了useState的set方法  所以只要一个原数组和修改数组方法就行
function useList() {
  const [commitList, setCommitList] = useState([]);
  useEffect(() => {
    async function getList() {
      const res = await axios.get("http://localhost:3004/list");
      console.log(res);
      setCommitList(_.orderBy(res.data, "number", "desc"));
    }
    getList();
  }, []);
  return {
    commitList,
    setCommitList,
  };
}
// 评论列表的Item组件
function Item({item,handleClick}){
  return(<div key={item.id} style={{ borderBottom: " solid 1px", width: "400px" }}>
    <p> 用户:{item.username}</p>
    <p> 评论:{item.content}</p>
    <p> 点赞数:{item.number}</p>
    <p> 时间:{item.ctime}</p>
    <p> 时间:{item.id},{user.id}</p>
    {/* 只有满足时候才会显示删除按钮 */}
    {user.id == item.id && 
    <button onClick={() => handleClick(item.id)}>删除按钮</button>}
  </div>)
}
function App() {
  const { commitList, setCommitList } = useList();
  const [type, setType] = useState("hot");
  // 删除按钮
  function handleClick(id) {
    console.log(id);
    setCommitList(commitList.filter((item) => item.id !== id));
  }
  function changeType(type) {
    setType(type);
    if (type == "hot") {
      setCommitList(_.orderBy(commitList, "number", "desc"));
    } else {
      setCommitList(_.orderBy(commitList, "ctime", "desc"));
    }
  }
  return (
    <div className="App">
      <div>
        {HOT.map((item) => (
          <span
            key={item.type}
            onClick={() => changeType(item.type)}
            className={classNames({ active: type === item.type }, "box")}
          >
            {/* className={`${type === item.type && "active"}`} */}
            {item.name}
          </span>
        ))}
      </div>
      <input></input>
      <button>发送</button>
      {commitList.map((item) => (
        // 将这个div封装成为一个组件 使用传值进行展示
        // <div key={item.id} style={{ borderBottom: " solid 1px", width: "400px" }}>
        //   <p> 用户:{item.username}</p>
        //   <p> 评论:{item.content}</p>
        //   <p> 点赞数:{item.number}</p>
        //   <p> 时间:{item.ctime}</p>
        //   {/* 只有满足时候才会显示删除按钮 */}
        //   {user.id === item.id && <button onClick={() => handleClick(item.id)}>删除按钮</button>}
        // </div>
        <Item key={item.id} item={item} handleClick={handleClick}></Item>
      ))}
    </div>
  );
}

export default App;
相关推荐
ᥬ 小月亮8 分钟前
webpack基础
前端·webpack
YongGit27 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye2 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤2 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js