首页 > 其他分享 >react笔记之完成Counter组件

react笔记之完成Counter组件

时间:2023-02-10 11:37:48浏览次数:31  
标签:歌谣 Counter react amount props 组件 border center


前言

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

react笔记之完成Counter组件_css

counter.js

import React from 'react';
import classes from './Counter.module.css';

// 计数器的组件
const Counter = (props) => {
return (
<div className={classes.Counter}>

{
(props.amount && props.amount !== 0) ? (
<>
<button className={classes.Sub}><span>-</span></button>
<span className={classes.count}>{props.amount}</span>
</>
) : null
}

<button className={classes.Add}>
<span>+</span>
</button>
</div>
);
};

export default Counter;

样式部分

.Counter{
display: flex;
align-items: center;
}

.Sub,
.Add{
display: flex;
justify-content: center;
align-items: center;
border: none;
background-color: #FCBF49;
width: 36rem;
height: 36rem;
border-radius: 50%;
font-size: 24px;
padding: 0;
}

.Sub{
background-color: white;
border: 1px solid black;
}

.count{
font-size: 16px;
margin: 0 5px;
}

运行结果

react笔记之完成Counter组件_css_02

我是歌谣 放弃很容易 但是坚持一定很酷


标签:歌谣,Counter,react,amount,props,组件,border,center
From: https://blog.51cto.com/u_15460007/6049006

相关文章

  • react笔记之引入FontAwesome
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从......
  • react笔记之项目准备
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从......
  • react笔记之完成meals组件
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从......
  • react笔记之加载meal数据
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从......
  • day71-非单文件组件(有意思)
    组件非单文件组件组件的定义向外提供一个局部的效果功能的代码集合(html/css/js/image....)作用:复用代码,简化项目编码提高运行效率组件的创建分为创建组件,注册组......
  • 界面组件Telerik UI for WPF R1 2023——让导航栏变得更智能!
    TelerikUIforWPF拥有超过100个控件来创建美观、高性能的桌面应用程序,同时还能快速构建企业级办公WPF应用程序。UIforWPF支持MVVM、触摸等,创建的应用程序可靠且结构良......
  • 类似Office的应用UI怎么实现?用这个UI组件库轻松搞定!
    DevExpressWinForm拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForm能完美构建流畅、美观且易于使用的应用程序,无论是Office风......
  • 最干货最详细的vue组件通信教程
    ​Vue中常见的组件通信方式可分为三类父子通信        父向子传递数据是通过props,子向父是通过events($emit);        通过父链/子链也可以通信($par......
  • react 路由详解
    简述路由的本质就是在一个页面上,通过交互,不刷新页面但能改变页面视图的一种方法。react-router就是一个扩展react从而实现路由的第三方库router实例在线演......
  • DRF组件使用(转载)
    一 认证Authentication开发中常见的认证方式:cookie、session、token。需要配合权限组件来使用。创建一个新的子应用component?1pythonmanage.pystarta......