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

Posted 2022-12-29

前言

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

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;