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

落寞瓜子壳 lv.3

发布时间：2022-12-17 13:24:23 245

相关标签： # 前端# css# 容器# 数据

前言

我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷微信公众号前端小歌谣关注公众号带你进入前端学习交流群

显示日期

父组件

/* 日志的容器 */
import LogItem from "./LogItem/LogItem";
import './Logs.css';

const Logs = () => {

  return 

    {/*在父组件中可以直接在子组件中设置属性*/}
    {/*{}} />*/}
    
    
  

};

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 (
        
            
            {/* 日志内容的容器 */}
            
                {/*
                  如果将组件中的数据全部写死，将会导致组件无法动态设置，不具有使用价值
                    我们希望组件数据可以由外部设置，在组件间，父组件可以通过props（属性）向子组件传递数据
                */}
                {props.desc}

                {props.time}分钟

            

        

    );
};


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 (
        
            
                {month}
            

            
                {date}
            

        

    );
};

export default MyDate;

总结

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

文章来源： https://blog.51cto.com/u_14476028/5929528

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。