#yyds干货盘点# react笔记之学习之添加card组件

简介: #yyds干货盘点# react笔记之学习之添加card组件

前言

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

App.js

import Logs from "./Components/Logs/Logs";
const App = () => {
  return <div>
    <Logs/>
  </div>;
};
// 导出App
export default App;

log.js

/* 日志的容器 */
import LogItem from "./LogItem/LogItem";
import Card from "../UI/Card/Card";
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 <Card className="logs">
        {
            logItemDate
            // logsData.map(item => <LogItem {...item}/> )
        }
    </Card>
};
export default Logs;

card.js

import React from 'react';
import './Card.css';
const Card = (props) => {
    /*
    *   props.children 表示组件的标签体
    * */
    // console.log(props.children);
    return <div className={`card ${props.className}`}>{props.children}</div>;
};
export default Card;

总结

image.png

相关文章
|
10天前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
29天前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
24 0
|
1天前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
6 1
|
7天前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
24天前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
10 0
|
26天前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
29天前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
63 1
|
前端开发 JavaScript
组件与props (精读React官方文档—04)
组件与props (精读React官方文档—04)
74 0
|
前端开发 安全 JavaScript
【Message 全局提示】基于 React 实现 Message 组件
使用 ReactDOM.createRoot、React.forwardRef、React.useImperativeHandle 实现 Message 组件。使用 Web Crypto API 生成符合密码学要求的安全的随机 ID。
|
存储 前端开发 JavaScript
React 中非受控和受控的组件
React 中非受控和受控的组件