当前位置： 首页 > backend >正文

React---day9

backend 2025/6/29 0:57:40

11、css

11.1 styled的基本使用

CSS-in-JS的模式就是一种将样式（CSS）也写入到JavaScript中的方式，并且可以方便的使用JavaScript的状态；

npm add styled-components

const Title = styled.h1`font-size: 1.5em;text-align: center;color: palevioletred;
`;
        <Title>Hello World, this is my first styled component!</Title>

它支持类似于CSS预处理器一样的样式嵌套：

  • 支持直接子代选择器或后代选择器，并且直接编写样式；
  • 可以通过&符号获取当前元素；
  • 直接伪类选择器、伪元素等；
const Wrapper = styled.section`padding: 4em;background: papayawhip;.banner{&,active{color:red;}&:hover {color:blue;}}&::after {content:"aaa"}
`;

11.2 props、attrs

**props:**props可以被传递给styled组件

  • 获取props需要通过${}传入一个插值函数，props会作为该函数的参数；
  • 这种方式可以有效的解决动态样式的问题；

传入数据：

   <HyRequest left="20px" />

在styled当中使用:

const HyRequest = styled.input.attrs(props => ({placeholder: "请填写文本",bcolor: "red",left: props.left || "20px"
}))

**attrs:**新建属性

const HyRequest = styled.input.attrs(props => ({placeholder: "请填写文本",bcolor: "red",left: props.left || "20px"
}))`border-color: red;border: 1px solid ${props => props.bcolor};padding-left: ${props => props.left};
`;

11.3 高级特性

继承

const HYButton = styled.button`padding: 10px 20px;border: 1px solid red;color: ${props => props.theme.themeColor};background: ${props => props.theme.themeColor};cursor: pointer;
`;
// 继承btn
const HYPrimaryButton = styled(HYButton)`
background: blue;
`

设置主题

先引入：

import styled, { ThemeProvider } from 'styled-components';

添加主题：

      <ThemeProvider theme={{themeColor:"yellow" , fontSize:"18px"}}><HyRequest left="20px" /><HYButton /><HYPrimaryButton /><Title>Hello World, this is my first styled component!</Title><div className="banner">我是轮播图</div></ThemeProvider>

使用：

const HYButton = styled.button`padding: 10px 20px;border: 1px solid red;color: ${props => props.theme.themeColor};background: ${props => props.theme.themeColor};cursor: pointer;
`;

12、axios的封装

// 开发环境的基础URL
const devBaseURL = 'https://httpbin.org';
// 生产环境的基础URL
const proBaseURL = 'https://production.org';// 根据当前环境变量，动态导出基础URL
export const BASE_URL = process.env.NODE_ENV === 'development' ? devBaseURL : proBaseURL;// 请求超时时间（毫秒）
export const TIMEOUT = 5000;import axios from 'axios';// 创建 axios 实例
const instance = axios.create({baseURL: BASE_URL,timeout: TIMEOUT,
});// 请求拦截器
instance.interceptors.request.use(config => {// 可以在这里添加 token 或其他请求头// config.headers.Authorization = 'Bearer token';return config;},error => {return Promise.reject(error);}
);// 响应拦截器
instance.interceptors.response.use(response => {// 可以在这里统一处理响应数据return response.data;},error => {// 统一错误处理return Promise.reject(error);}
);export default instance;

13、react-transition-group

npm install react-transition-group --save

13.1 CssTransition

它是CssTransition组件上写classname，搭配一个.css的文件

文件里面对应的一些节点名称：

它们有三种状态，需要定义对应的CSS样式：

  • 第一类，开始状态：对于的类是-appear、-enter、exit；
  • 第二类：执行动画：对应的类是-appear-active、-enter-active、-exit-active；
  • 第三类：执行结束：对应的类是-appear-done、-enter-done、-exit-done；

常见的一些属性：

  • in：触发进入或者退出状态
    • 如果添加了unmountOnExit={true}，那么该组件会在执行退出动画结束后被移除掉；
    • 当in为true时，触发进入状态，会添加-enter、-enter-acitve的class开始执行动画，当动画执行结束后，会移除两个class，并且添加-enter-done的class；
    • 当in为false时，触发退出状态，会添加-exit、-exit-active的class开始执行动画，当动画执行结束后，会移除两个class，并且添加-enter-done的class；
  • classNames：动画class的名称
    • 决定了在编写css时，对应的class名称：比如card-enter、card-enter-active、card-enter-done；
  • timeout：
    • 过渡动画的时间
  • appear：
    • 是否在初次进入添加动画（需要和in同时为true）
  • unmountOnExit：退出后卸载组件

CSSTransition对应的钩子函数：主要为了检测动画的执行过程，来完成一些JavaScript的操作

  • onEnter：在进入动画之前被触发；
  • onEntering：在应用进入动画时被触发；
  • onEntered：在应用进入动画结束后被触发；

一个小案例 ：

 render() {const { isShow } = this.state;return (<div><CSSTransition in={isShow} classNames="h2" timeout={500}>{(state) => (<h2style={{width: "200px",height: "300px",background: "red",transition: "all 0.5s",}}>我是一个动画</h2>)}</CSSTransition><button onClick={() => this.setState({ isShow: !this.state.isShow })}>点击</button></div>);}

注意CssTransition里面的写法

Css:

.h2-enter {opacity: 0.6;
}
.h2-enter-active {opacity: 1;transition: opacity 0.5s;
}
.h2-enter-done {opacity: 1;
}
.h2-exit {opacity: 1;
}
.h2-exit-active {opacity: 0.6;transition: opacity 0.5s;
}
.h2-exit-done {opacity: 0;
}

注意css名称的写法

nce.interceptors.request.use(
config => {
// 可以在这里添加 token 或其他请求头
// config.headers.Authorization = ‘Bearer token’;
return config;
},
error => {
return Promise.reject(error);
}
);

// 响应拦截器
instance.interceptors.response.use(
response => {
// 可以在这里统一处理响应数据
return response.data;
},
error => {
// 统一错误处理
return Promise.reject(error);
}
);

export default instance;


## 13、react-transition-group

npm install react-transition-group --save


### 13.1 CssTransition 它是CssTransition组件上写classname，搭配一个.css的文件**文件里面对应的一些节点名称：**它们有三种状态，需要定义对应的CSS样式：- 第一类，开始状态：对于的类是-appear、-enter、exit；
- 第二类：执行动画：对应的类是-appear-active、-enter-active、-exit-active；
- 第三类：执行结束：对应的类是-appear-done、-enter-done、-exit-done；**常见的一些属性：**- in：触发进入或者退出状态
- - 如果添加了unmountOnExit={true}，那么该组件会在执行退出动画结束后被移除掉；- 当in为true时，触发进入状态，会添加-enter、-enter-acitve的class开始执行动画，当动画执行结束后，会移除两个class，并且添加-enter-done的class；- 当in为false时，触发退出状态，会添加-exit、-exit-active的class开始执行动画，当动画执行结束后，会移除两个class，并且添加-enter-done的class；
- classNames：动画class的名称
- - 决定了在编写css时，对应的class名称：比如card-enter、card-enter-active、card-enter-done；
- timeout：
- - 过渡动画的时间
- appear：
- - 是否在初次进入添加动画（需要和in同时为true）
- unmountOnExit：退出后卸载组件CSSTransition对应的钩子函数：主要为了检测动画的执行过程，来完成一些JavaScript的操作- onEnter：在进入动画之前被触发；
- onEntering：在应用进入动画时被触发；
- onEntered：在应用进入动画结束后被触发；**一个小案例 ：**

render() {
const { isShow } = this.state;
return (



{(state) => (
<h2
style={{
width: “200px”,
height: “300px”,
background: “red”,
transition: “all 0.5s”,
}}
>
我是一个动画

)}

<button onClick={() => this.setState({ isShow: !this.state.isShow })}>
点击


);
} 


注意CssTransition里面的写法**Css:**

.h2-enter {
opacity: 0.6;
}
.h2-enter-active {
opacity: 1;
transition: opacity 0.5s;
}
.h2-enter-done {
opacity: 1;
}
.h2-exit {
opacity: 1;
}
.h2-exit-active {
opacity: 0.6;
transition: opacity 0.5s;
}
.h2-exit-done {
opacity: 0;
}


注意css名称的写法
http://www.xdnf.cn/news/12141.html

相关文章：

  • Python爬虫与Java爬虫深度对比：从原理到实战案例解析
  • 用函数实现模块化程序设计（适合考研、专升本）
  • 自定义注解facade 实现切面 进行日志记录和参数校验
  • Xcode 16.4 + iOS 18 系统运行时崩溃：___cxa_current_primary_exception 符号丢失的原因与解决方案
  • 用 n8n 提取静态网页内容：从 HTTP Request 到 HTML 节点全解析
  • 国产linux系统（银河麒麟，统信uos）使用 PageOffice在线编辑word文件保存数据同时保存文件
  • Ubuntu20.04设置为开机后直接自动进入纯命令行界面
  • mysql复合查询mysql子查询
  • 深度学习姿态估计实战：基于ONNX Runtime的YOLOv8 Pose部署全解析
  • IDEA：配置 Git 需要完成 Git 路径设置、账号认证以及仓库关联三个主要步骤
  • 目标检测实战：让AI“看见“并定位物体（superior哥AI系列第11期）
  • [Zynq] Zynq Linux 环境下 AXI UART Lite 使用方法详解（代码示例）
  • ArcGIS Pro 3.4 二次开发 - 宗地
  • HarmonyOS：如何在启动框架中初始化HMRouter
  • 【前端】vue3性能优化方案
  • 【Linux】Linux基础指令1
  • RPA+AI：自动化办公机器人开发指南
  • 基于值函数的强化学习算法之Double Q-Learning详解
  • 129、QT搭建FFmpeg环境
  • vue3+ts实现百度地图鼠标绘制多边形
  • 【websocket】安装与使用
  • 在word中点击zotero Add/Edit Citation没有反应的解决办法
  • 前端js获取当前经纬度（H5/pc/mac/window都可用）
  • 腾讯云V3签名
  • php apache构建 Web 服务器
  • 【Rust宏编程】Rust有关宏编程底层原理解析与应用实战
  • 【Linux】POSIX信号量
  • uniapp运行在微信开发者工具中流程
  • 佳易王钟表手表维修养护管理系统：高效便捷的维修管理解决方案
  • 使用cephadm离线部署reef 18版并配置对接openstack