前言
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群
主组件
/* 日志的容器 */ import LogItem from "./LogItem/LogItem"; 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 <div className="logs"> { logItemDate // logsData.map(item => <LogItem {...item}/> ) } </div> }; export default Logs;
子组件
import React from 'react'; import MyDate from "./MyDate/MyDate"; import './LogItem.css' const LogItem = (props) => { /* * props是只读的不能修改 * */ // props.desc = '嘻嘻'; // 不能修改props中的属性 // console.log(props.desc); return ( <div className="item"> <MyDate date={props.date}/> {/* 日志内容的容器 */} <div className="content"> {/* 如果将组件中的数据全部写死，将会导致组件无法动态设置，不具有使用价值 我们希望组件数据可以由外部设置，在组件间，父组件可以通过props（属性）向子组件传递数据 */} <h2 className="desc">{props.desc}</h2> <div className="time">{props.time}分钟</div> </div> </div> ); }; export default LogItem;
孙子组件
import React from 'react'; import './MyDate.css'; const MyDate = (props) => { // console.log(props.date.getDate()); // 获取月份 const month = props.date.toLocaleString('zh-CN', {month:'long'}); // 获取日期 const date = props.date.getDate(); return ( <div className="date"> <div className="month"> {month} </div> <div className="day"> {date} </div> </div> ); }; export default MyDate;
总结
