房地产官网_专业的网站制作专业公司_百度一下首页问问_优化神马排名软件

封装评论列表的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) => (<spankey={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;