前言
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群
App.js
import Logs from "./Components/Logs/Logs"; const App = () => { return <div> <Logs/> </div>; }; // 导出App export default App;
log.js
/* 日志的容器 */ import LogItem from "./LogItem/LogItem"; import Card from "../UI/Card/Card"; import './Logs.css'; const Logs = () => { // 模拟一组从服务器中加载的数据 const logsData = [ { id: '001', date: new Date(2021, 1, 20, 18, 30), desc: '学习九阳神功', time: 30 }, { id: '002', date: new Date(2022, 2, 10, 12, 30), desc: '学习降龙十八掌', time: 20 }, { id: '003', date: new Date(2022, 2, 11, 11, 30), desc: '学习JavaScript', time: 40 }, { id: '004', date: new Date(2022, 2, 15, 10, 30), desc: '学习React', time: 80 } ]; // 将数据放入JSX中 const logItemDate = logsData.map(item => <LogItem key={item.id} date={item.date} desc={item.desc} time={item.time}/>); return <Card className="logs"> { logItemDate // logsData.map(item => <LogItem {...item}/> ) } </Card> }; export default Logs;
card.js
import React from 'react'; import './Card.css'; const Card = (props) => { /* * props.children 表示组件的标签体 * */ // console.log(props.children); return <div className={`card ${props.className}`}>{props.children}</div>; }; export default Card;
总结
