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

React---day9

news 2025/7/19 18:07:17

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.lqws.cn/news/154585.html

相关文章：

  • Educational Codeforces Round 179 (Rated for Div. 2)
  • centos查看开启关闭防火墙状态
  • Java高级 | 【实验五】Spring boot+mybatis操作数据库
  • 获取KIMI API以及API key
  • Jenkins实现自动化部署Springboot项目到Docker容器(Jenkinsfile)
  • IDM 免费安装使用方法，支持6.42版本,实时更新
  • 查看本机显卡信息
  • 华为云Flexus+DeepSeek征文 | 基于DeepSeek-V3构建企业知识库问答机器人实战
  • 不等式中的放缩法
  • Java中List的forEach用法详解
  • 总结vxe-grid的一些用法
  • Jenkins | Linux环境部署Jenkins与部署java项目
  • vscode 离线安装第三方库跳转库
  • 更新Java的环境变量后VScode/cursor里面还是之前的环境变量
  • Github Copilot新特性：Copilot Spaces-成为某个主题的专家
  • 【已解决】MACOS M4 芯片使用 Docker Desktop 工具安装 MICROSOFT SQL SERVER
  • openvino如何在c++中调用pytorch训练的模型
  • 阿里云ACP云计算备考笔记 (3)——云存储RDS
  • HttpServletRequest常用方法
  • 第六个微信小程序：教师工具集
  • 前端js获取当前经纬度（H5/pc/mac/window都可用）
  • JVM——如何打造一个类加载器？
  • Flask-Babel 使用示例
  • Spring 常用注解的使用
  • 全球IP归属地查询接口如何用C#进行调用？
  • IP证书与 域名证书有什么区别？
  • 如何自定义一个 Spring Boot Starter？
  • 老旧热泵设备智能化改造：Ethernet IP转Modbus的低成本升级路径
  • 打通印染车间“神经末梢”：DeviceNet转Ethernet/IP连接机器人的高效方案
  • 船舶事故海上搜救VR情景演练全场景 “复刻”，沉浸式救援体验​