#yyds干货盘点# react笔记之学习之显示日期

Posted 2022-12-13

前言

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

总结