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;
相关推荐
成长ing121383 分钟前
cocos creator 3.x shader 流光
前端·cocos creator
Alo36511 分钟前
antd 组件部分API使用方法
前端
BillKu14 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
江城开朗的豌豆35 分钟前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
这里有鱼汤43 分钟前
首个支持A股的AI多智能体金融系统,来了
前端·python
袁煦丞43 分钟前
5分钟搭建高颜值后台!SoybeanAdmin:cpolar内网穿透实验室第648个成功挑战
前端·程序员·远程工作
摸鱼仙人~44 分钟前
Vue.js 指令系统完全指南:深入理解 v- 指令
前端·javascript·vue.js
前端进阶者1 小时前
支持TypeScript并打包为ESM/CommonJS/UMD三种格式的脚手架项目
前端
星空下的曙光1 小时前
pnpm vs npm区别对比
前端·npm·node.js
啃火龙果的兔子1 小时前
React 图标库发布到 npm 仓库
前端·react.js·npm