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) => (
<h2
style={{
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名称的写法