React（8）

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

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;