1.react中动态添加class
1.react原生添加class
React在jsx语法中给了我们开发者足够多的灵活性，你可以想编写javascript代码一样，通过一些逻辑来决定是否添加某些class。
{
/* 需求：当isActive为true的时候就是增加active的类名，否则不增加 */}
<h3 className={
"title " + (isActive ? "active" : "")}></h3>
<h1 className={
["title",(isActive ? "active": "")].join(" ")}>我是标题3</h1>
注意使用第一种添加方式（H3）需要有一个空格，否则添加的类名为titleactive；
使用第二种添加方式（H1）需要使用js数组方法 join添加空格分隔多个类名。
2.这个时候我们可以借助一个第三方的库：classnames
这是一个用于动态添加classnames的一个库。
安装classnames：yarn add classnames
使用classnames
<h2 className={
classNames('foo','bar','baz','title')}>这里模拟使用classnames</h2>
<h2 className={
classNames({
'active': isActive,'bar': isBar}, 'title')}>我是标题6</h2>
2.学习使用antDesign
安装antDesign：yarn add antDesign
antDesign库引入之后是没有css样式的，因为antdesign将样式独立写在了antd/dist/antd.css种，需要我们在App.js中手动引入。
- 那么，当我们引入到antDesign的时候，会不会引入过多的我们用不到的组件从而导致导致打包后的文件较大的问题。
antd中JS部分默认使用tree shaking，通过import {button} from ‘antd’ 可以实现按需加载的效果。
3.学习craco
因为react的ui框架antdesign默认主题为蓝色，所以当我们需要修改页面组建的颜色（主题）的时候，就需要用到了craco。
-
==第一步：==安装craco
-
==第二步：==安装 craco-less
-
添加配置文件 craco.config.less
-
修改配置
-
craco.config.js 配置信息如下
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: {
'@primary-color': '#1DA57A' },
javascriptEnabled: true,
},
},
},
},
],
}
最后使用的时候需要将App.js文件中引入的antdesign的css文件修改为‘antd/list/antd.less’文件，之后修改的样式就会生效 。
4.通过AntDesign实现一个案例
效果如下：
重要代码：
import React, {
PureComponent } from 'react'
import {
Comment, Tooltip, Avatar, Button } from 'antd'
import moment from 'moment'
import {
DeleteOutlined} from '@ant-design/icons'
export default class commentText extends PureComponent {
render() {
const {
nickName, avatar, content, datetime } = this.props.comment;
return (
<div style={
{
width: "500px", padding: "5px 20px 0px 20px" }}>
<Comment
author={
<a>{
nickName}</a>}
avatar={
<Avatar
src={
avatar}
alt={
nickName}
/>
}
content={
<p>
{
content}
</p>
}
datetime={
<Tooltip title={
datetime.format('YYYY-MM-DD HH:mm:ss')}>
<span>{
datetime.fromNow()}</span>
</Tooltip>
}
actions = {
[
<span onClick={
e => this.removeItem()}> <DeleteOutlined/>删除</span>
]
}
/>
</div>
)
}
removeItem(){
this.props.removeItem()
}
}
import React, {
PureComponent } from 'react'
import moment from 'moment'
import {
Input, Button} from 'antd'
import commentText from './CommentText';
export default class commentInput extends PureComponent {
constructor(props){
super(props);
this.state = {
content:''
}
}
render() {
return (
<div style={
{
width:"500px",padding:"20px"}}>
<Input.TextArea rows='4' cols="30"
value={
this.state.content}
onChange={
e => this.handlerChange(e)}
/>
<Button type="primary" onClick={
e=> this.addComment()}>提交评论</Button>
</div>
)
}
handlerChange(event){
this.setState({
content:event.target.value
})
}
addComment(){
const commentInfo = {
id: moment().valueOf(),
avatar:'https://profile.csdnimg.cn/A/8/D/1_qq_43955202',
nickName:"JiaHao Kang",
datetime:moment(),
content:this.state.content
}
this.props.submitComment(commentInfo)
this.setState({
content:""
})
}
}
import React, {
PureComponent } from 'react'
import CommentInput from './components/CommentInput'
import CommentText from './components/CommentText'
export default class App extends PureComponent {
constructor(props){
super(props);
this.state = {
commentList:[]
}
}
render() {
return (
<div>
{
this.state.commentList.map((item,index) => {
return (
<CommentText key={
item.id} comment={
item} removeItem={
e => this.removeComment(index)}/>
)
})
}
<CommentInput submitComment={
info => this.submitComment(info)}/>
</div>
)
}
submitComment(info){
this.setState({
commentList:[...this.state.commentList,info]
})
}
removeComment(index){
const newCommentList = [...this.state.commentList];
newCommentList.splice(index,1)
this.setState({
commentList:newCommentList
})
}
}