项目实战
使用CSS
尽量不要使用内联CSS
- 内联style代码多，性能差，扩展性差
- 外链css文件可复用代码，可单独缓存文件
元素内联style
- 和HTMl元素的style相似
- 必须用JS写法，不能是字符串，里面必须是对象
<span style={{ color: "green" }}>已发布</span>- 驼峰写法
使用css文件
- 引入css文件
- JSX中使用className
<div key={id} className="list-item"> let itemClassName = "list-item";
if (isPublished) itemClassName += " published";
<div key={id} className={itemClassName}>
- 可使用clsx或classnames做条件判断，两个功能相近，都是判断class条件的集合，比如当判断的条件多了，使用上面的if无法满足的时候就需要借用到工具。在这个项目中用classnames做例子，通过下列步骤使用
- classnames仓库地址
下载指令
npm install classnames
import classnames from "classnames";
const itemClassName = classnames("list-item", { published: isPublished });
// 上下两种含义一致，只是不同的写法
const itemClassName = classnames({
"list-item": true,
published: isPublished,
});CSS Module
普通CSS的问题，React使用组件化开发，多个组件就需要多个CSS文件，多个CSS文件很容易造成className重复。在没有相应的工具前使用的是BEM，一种软性规范。主观性过强而不推荐。以下是CSS module的特点
- 每个CSS文件都当作单独的模块，命令xxx.module.css
- 为每个className增加后缀名，不重复
- Create- React-App原生支持CSS Module
将文件名更改为xxx.module.css的格式，样式的格式不变
// QuestionCard.module.css 文件中
.list-item{
border: 1px solid black;
padding: 10px;
margin-bottom: 16px;
}
.published{
border: 1px solid greenyellow;
}引入和使用，这一部分和原来的差别比较大
// import classnames from "classnames";
// 上面是原来的，下面是module的引入
import styles from "./QuestionCard.module.css";
// 使用格式，其中list-item因为有-符号，如果直接styles.list-item会报错，下面这个js写法就可以
<div key={id} className={styles["list-item"]}>Sass
CSS语法比较原始，不能嵌套。现代开发一般使用less sass等预处理语言。CRA原生支持Sass Module，后缀直接改为.scss即可
下载指令
npm install sass --save
接下来将想要使用的文件格式改为xxx.scss，记得后缀为scss。
import styles from "./QuestionCard.module.scss";
const itemClassName = classnames({
[styles["list-item"]]: true,
[styles["published"]]: isPublished,
});
<div key={id} className={itemClassName}>其中对于itemClassName的中括号的解释如下，在这段代码中，中括号（[]）用于在JavaScript对象字面量中动态地设置属性名。这种语法是ES6）中引入的计算属性名的一个特性，其键为变量y而不是固定字符比如a时，这个写法实际上是将这个变量的引用值传递进去
CSS-in-JS
- 一种解决方案（而非工具名称），有好几个工具
- 在JS中写CSS，带来极大的灵活性
- 它和内联style完全不一样，也不会有内联style的问题和className的问题（会自行生成class）
Style-components
官网 可能是外网的链接，打开的时候速度有点慢
下载指令
npm install styled-components
引入代码如下，视频中老师的引入爆红线，需要额外下载东西，我这边没有，不过也顺便下载了。下面这个组件可以测试引入是否成功
下载指令
npm i --save-dev @types/styled-components
import React, { FC } from "react";
import styled, { css } from "styled-components";
const Button = styled.button<{ $primary?: boolean }>`
background: transparent;
border-radius: 3px;
border: 2px solid #bf4f74;
color: "#BF4F74";
margin: 0 1em;
padding: 0.25em 1em;
${(props) =>
props.$primary &&
css`
background: blue;
color: white;
`};
`;
const Container = styled.div`
text-align: center;
`;
const Demo: FC = () => {
return (
<div>
<p>styled-components demo</p>
<Container>
<Button>normal button</Button>
<Button $primary>primary 按钮</Button>
</Container>
</div>
);
};
export default Demo;大概解释一下上述代码中的逻辑，其中styled可以理解为一个类，而styled.button和styled.div小数点后的两个属性 都可以理解为方法，包括css后面加字符串，css也是个函数，反引号可以理解为传参如下图所示，多一层括号显得麻烦，所以不用括号的形式
styled-jsx
仓库地址
项目中不使用这个，因为ts环境中对标签的属性比较敏感，而这个工具插入了一些非标准的属性，导致需要额外扩展比较多的功能，用于js没问题，可以选择性的使用。
emotion
官网地址
使用起来的形式和前面的components比较类似，但是同样有个问题，就是这个工具在标签中添加了css属性，在ts中这么设置会报错，所以ts环境中同样不进行使用.
重构列表页，增加css样式
选择CSS-Module
- 简单易用，学习成本较低
- 性能更好，使用CSS-in-JS会增加编译时间
- 不需要灵活变换样式
新建React项目，具体过程参考这一章，原来有很多个Demo的也进行保留，两个都会讲。以下几个文件直接复制粘贴可以用
App.tsx
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import List from "./pages/list";
function App() {
return (
<div>
<h1>问卷F1</h1>
<List />
</div>
);
}
export default App;list.tsx
import React, { FC, useState } from "react";
import QuestionCard from "../components/QuestionCard";
import styled from "./list.module.scss";
const rawQuestionList = [
{
_id: "q1",
title: "问卷1",
isPublished: true,
isStar: false,
answerCount: 5,
createAt: "3月10日 13:23",
},
{
_id: "q2",
title: "问卷2",
isPublished: false,
isStar: true,
answerCount: 15,
createAt: "3月22日 13:23",
},
{
_id: "q3",
title: "问卷3",
isPublished: true,
isStar: true,
answerCount: 100,
createAt: "4月10日 13:23",
},
{
_id: "q4",
title: "问卷4",
isPublished: false,
isStar: false,
answerCount: 98,
createAt: "3月23日 13:23",
},
];
const List: FC = () => {
const [questionList, setQuestionList] = useState(rawQuestionList);
return (
<>
<div className={styled.header}>
<div className={styled.left}>
<h3>我的问卷</h3>
</div>
<div className={styled.right}>搜索</div>
</div>
<div className={styled.content}>
{questionList.map((q) => {
const { _id } = q;
return <QuestionCard key={_id} {...q} />;
})}
</div>
<div className={styled.footer}>footer</div>
</>
);
};
export default List;
list.module.scss
.header{
display: flex;
.left{
flex: 1;
}
.right{
flex: 1;
text-align: right;
}
}
.content{
margin-bottom: 20px;
}
.footer{
text-align: center;
}
body{
background-color: #f1f1f1;
}QuestionCard.module,scss
.container{
margin-bottom: 20px;
padding: 12px;
border-radius: 3px;
background-color: white;
&:hover{
box-shadow: 0 4px 10px lightgray;
}
}
.title{
display: flex;
.left{
flex: 1;
}
.right{
flex: 1;
text-align: right;
}
}
.button-container{
display: flex;
.left{
flex: 1;
}
.right{
flex: 1;
text-align: right;
button{
color: #999;
}
}
}QuestionCard.tsx
import React, { FC, useEffect } from "react";
// import "./QuestionCard.css";
import styled from "./QuestionCard.module.scss";
import classnames from "classnames";
type PropsType = {
_id: string;
title: string;
isPublished: boolean;
isStar: boolean;
answerCount: number;
createAt: string;
// 问号是可写可不写，跟flutter语法相似
deletQuestion?: (id: string) => void;
pubQuestion?: (id: string) => void;
};
const QuestionCard: FC<PropsType> = (props: PropsType) => {
const { _id, title, createAt, answerCount, isPublished } = props;
return (
<div className={styled.container}>
<div className={styled.title}>
<div className={styled.left}>
<a href="#">{title}</a>
</div>
<div className={styled.right}>
{isPublished ? (
<span style={{ color: "green" }}>已发布</span>
) : (
<span>未发布</span>
)}
<span>答卷：{answerCount}</span>
<span>{createAt}</span>
</div>
</div>
<div className={styled["button-container"]}>
<div className={styled.left}>
<button>编辑问卷</button>
<button>数据统计</button>
</div>
<div className={styled.right}>
<button>标星</button>
<button>复制</button>
<button>删除</button>
</div>
</div>
</div>
);
};
export default QuestionCard;
