码迷,mamicode.com
首页 > 其他好文 > 详细

react如何配置antd3.0版本

时间:2020-05-01 20:26:03      阅读:368      评论:0      收藏:0      [点我收藏+]

标签:引入   prevent   prim   主题   design   extend   wired   des   load   

官网:https://ant.design/docs/react/use-with-create-react-app-cn

1、安装:antd

npm install antd@^3.26.13 -S

 

2.按需引入antd, 安装 npm add react-app-rewired customize-cra

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

  

3.根目录下创建config-overrides.js

const { 
  addWebpackAlias, 
  addLessLoader, 
  fixBabelImports, 
  override, 
  addDecoratorsLegacy 
} = require(‘customize-cra‘)
const path = require(‘path‘)

module.exports = override(
  // @ 修饰器
  addDecoratorsLegacy(),
  fixBabelImports(‘import‘, {
    libraryName: ‘antd‘,
    libraryDirectory: ‘es‘,
    // 支持 less sass stylus
    style: true,
  }),
  // 支持 antd 主题定制
  addLessLoader({
    javascriptEnabled: true,
  }),
  // 别名
  addWebpackAlias({
    ‘@‘: path.resolve(__dirname, ‘src‘),  
    ‘@@‘: path.resolve(__dirname, ‘src/components‘),
  })
)

  

这样就可以正常使用了。下面举个form的例子

import React from ‘react‘
import { Form, Input, Button, } from ‘antd‘;

//export default @Form.create()    //使用@修饰器
export default @Form.create({    //这里就顺便把表单回填也写下算了。 
  mapPropsToFields(props) {
    return {
      username: Form.createFormField({
        value: 22,  //
      })
    }
  }
})
class NormalLoginForm extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(‘Received values of form: ‘, values);
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <Form.Item>
          {getFieldDecorator(‘username‘, {
            rules: [{ required: true, message: ‘Please input your username!‘ }],
          })(
            <Input placeholder="Username" />,
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" className="login-form-button">
            Log in
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

  

 

react如何配置antd3.0版本

标签:引入   prevent   prim   主题   design   extend   wired   des   load   

原文地址:https://www.cnblogs.com/yetiezhu/p/12731454.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!