react-问卷星项目（4）

项目实战

使用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>)}&nbsp;<span>答卷：{answerCount}</span>&nbsp;<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;