React学习 --- Ant Design
AntDesign ，简称 antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品
中后台的产品 属于工具性产品，很多优秀的设计团队通过自身的探索和积累，形成了自己的设计体系
antd 的 JS 代码默认支持基于 ES modules 的 tree shaking，对于 js 部分，直接引入 import { Button } from 'antd' 就会有按需加载的效果
基本使用
# 使用(这里以yarn为例) $ yarn add antd # antd将icon单独抽离成为了一个库 --- @ant-design/icons # 所以如果需要在antd中使用icon，则需要单独安装@ant-design/icons $ yarn add @ant-design/icons 复制代码
// antd将样式文件单独抽离成为了一个单独的css文件 // 如果需要使用对应的样式，那么需要在入口index.js中进行引入 import 'antd/dist/antd.css'; 复制代码
craco
create-react-app脚手架是基于webpack进行开发的
而默认情况下，create-react-app将webpack的配置全部都隐藏了起来
但是在实际开发中，我们的确存在一些情况需要手动覆盖默认的webpack的相关配置
此时就可以使用craco这个第三方库
# 安装 $ yarn add @craco/craco -D 复制代码
使用craco启动对应的项目
"scripts": { // 使用craco来替代react-scripts来启动react脚手架 "start": "craco start", "build": "craco build", "test": "craco test", } 复制代码在项目的根目录下新建craco.config.js
在编译的时候，会自动将craco.config.js和默认的webpack的相关配置进行合并
配置别名
craco.config.js
const path = require('path') module.exports = { // 在这里书写需要覆盖的webpack的相关配置 webpack: { alias: { '@': path.resolve(__dirname, './src') } } }s 复制代码配置主题
按照Antd Design 的 配置主题要求，自定义主题需要用到类似 less-loader 提供的 less 变量覆盖功能
我们可以引入 craco-less 来帮助加载 less 样式和修改变量
# 安装 yarn add craco-less -D 复制代码
主入口 --- index.js
// 将引入的css文件修改为less文件 import 'antd/dist/antd.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
import { PureComponent } from 'react' import Comment from '@/components/comment' import CommentItem from '@/components/commentItem' import dayjs from 'dayjs' export default class App extends PureComponent { constructor(props) { super(props) this.state = { commentList: [] } } render() { return ( <div style={{ width: '500px' }}> { this.state.commentList.map((comment, index) => <CommentItem key={ comment.id } comment={comment} handleRemove={ () => this.handleRemove(index) } /> ) } <Comment submit={ content => this.submit(content) }/> </div> ) } submit(content) { const comment = { id: Date.now(), nickname: 'coderxf', avatar: 'https://p9-passport.byteacctimg.com/img/user-avatar/745c26f761d5ad2b65d79f98eee61a5f~300x300.image', content, datetime: dayjs() } this.setState({ commentList: [ ...this.state.commentList, comment ] }) } handleRemove(index) { const commentList = [...this.state.commentList] commentList.splice(index, 1) this.setState({ commentList }) } } 复制代码comment.js
import { PureComponent } from 'react' import { Input, Button } from 'antd' const { TextArea } = Input export default class Comment extends PureComponent { constructor(props) { super(props) this.state = { content: '' } } render() { return ( <div> <TextArea rows={4} value={this.state.content} onChange={e => this.handleInput(e)} /> <Button type="primary" onClick={ () => this.submit() }>add comment</Button> </div> ) } handleInput(e) { this.setState({ content: e.target.value }) } submit() { this.props.submit(this.state.content) this.setState({ content: '' }) } } 复制代码commentItem.js
import { PureComponent } from 'react' import { Comment, Tooltip, Avatar } from 'antd' import { DeleteOutlined } from '@ant-design/icons' import dayjs from 'dayjs' import relativeTime from 'dayjs/plugin/relativeTime' dayjs.extend(relativeTime) export default class CommentItem extends PureComponent { render() { return ( <Comment actions={[<span onClick={this.props.handleRemove}><DeleteOutlined />删除</span>]} author={this.props.comment.nickname} avatar={<Avatar src={ this.props.comment.avatar } alt={ this.props.comment.nickname } />} content={<p>{this.props.comment.content}</p> } datetime={ <Tooltip title={dayjs().format('YYYY-MM-DD HH:mm:ss')}> <span>{dayjs().from(this.props.datetime)}</span> </Tooltip> } /> ) } handleRemove() { this.props.handleRemove() } }
作者：coderwxf
链接：https://juejin.cn/post/7030331655906656263