react笔记之学习之空列表提示

前言

我是歌谣 我有个兄弟 巅峰的时候排名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;