前言
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群
显示日期
父组件
/* 日志的容器 */ import LogItem from "./LogItem/LogItem"; import './Logs.css'; const Logs = () => { return <div className="logs"> {/*在父组件中可以直接在子组件中设置属性*/} {/*<LogItem test="456" hello="abc" fn={()=>{}} />*/} <LogItem date={new Date(2021,7,20,19,0)} desc={"学习前端"} time={"50"} /> <LogItem date={new Date(2022,5,22,5,30)} desc={"哈哈"} time={"30"} /> </div> }; export default Logs;
子组件
import React from 'react'; import MyDate from "./MyDate/MyDate"; import './LogItem.css' const LogItem = (props) => { // 在函数组件中，属性就相当于是函数的参数，可以通过参数来访问 // 可以在函数组件的形参中定义一个props，props指向的是一个对象 // 它包含了父组件中传递的所有参数 // console.log(props.date); 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;
总结
