#yyds干货盘点 react笔记之学习之空列表提示

时间:2023-02-20 14:02:27

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群

#yyds干货盘点 react笔记之学习之空列表提示

log.js

/* 日志的容器 */
import LogItem from "./LogItem/LogItem";
import Card from "../UI/Card/Card";
import './Logs.css';

const Logs = (props) => {

/*
* logsDate 用来存储学习的日志,
* 这个数据除了当前组件Logs需要使用外,LogsForm也需要使用
* 当遇到一个数据需要被多个组件使用时,我们可以将数据放入到这些组件共同的祖先元素中
* 这样就可以使得多个组件都能方便的访问到这个数据
*
* state的提升
*
* */
// 模拟一组从服务器中加载的数据


// 将数据放入JSX中
let logItemData = props.logsData.map(
(item, index) => <LogItem
onDelLog={() => props.onDelLog(index)}
key={item.id}
date={item.date}
desc={item.desc}
time={item.time}/>
);

if (logItemData.length === 0) {
logItemData = <p className="no-logs">没要找到日志!</p>;
}

return <Card className="logs">
{
logItemData
// logItemData.length !== 0 ? logItemData : <p className="no-logs">没要找到日志!</p>
// logsData.map(item => <LogItem {...item}/> )
}
</Card>
};

export default Logs;