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

2 years ago

source link: https://blog.51cto.com/u_14476028/5929528
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

精选原创

前端歌谣 2022-12-12 13:34:33 ©著作权

文章标签 css 数据 文章分类 JavaScript 前端开发 阅读数158

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