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