React学习 --- Ant Design

这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战

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()
  }
}