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

React---day9

article 2025/8/26 10:19:55

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;
}