react濡備綍閰嶇疆antd3.0鐗堟湰

Posted 2021-02-20

鏍囩锛?a href='http://www.mamicode.com/so/1/%e5%bc%95%e5%85%a5' title='寮曞叆'>寮曞叆   prevent   prim   涓婚   design   extend   wired   des   load   

瀹樼綉锛?a href="https://ant.design/docs/react/use-with-create-react-app-cn">https://ant.design/docs/react/use-with-create-react-app-cn

1銆佸畨瑁咃細antd

npm install antd@^3.26.13 -S

銆€

2.鎸夐渶寮曞叆antd锛?nbsp;瀹夎 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(鈥榗ustomize-cra鈥?
const path = require(鈥榩ath鈥?

module.exports = override(
  // @ 淇グ鍣?  addDecoratorsLegacy(),
  fixBabelImports(鈥榠mport鈥? {
    libraryName: 鈥榓ntd鈥?
    libraryDirectory: 鈥榚s鈥?
    // 鏀寔 less sass stylus
    style: true,
  }),
  // 鏀寔 antd 涓婚瀹氬埗
  addLessLoader({
    javascriptEnabled: true,
  }),
  // 鍒悕
  addWebpackAlias({
    鈥楡鈥? path.resolve(__dirname, 鈥榮rc鈥?,銆€銆€
    鈥楡@鈥? path.resolve(__dirname, 鈥榮rc/components鈥?,
  })
)

銆€銆€

杩欐牱灏卞彲浠ユ甯镐娇鐢ㄤ簡銆備笅闈妇涓猣orm鐨勪緥瀛?/p>

import React from 鈥榬eact鈥?import { Form, Input, Button, } from 鈥榓ntd鈥?

//export default @Form.create()    //浣跨敤@淇グ鍣?/pre>

export default @Form.create({銆€銆€銆€銆€//杩欓噷灏遍『渚挎妸琛ㄥ崟鍥炲～涔熷啓涓嬬畻浜嗐€?nbsp;
  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(鈥楻eceived values of form: 鈥? values);
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <Form.Item>
          {getFieldDecorator(鈥榰sername鈥? {
            rules: [{ required: true, message: 鈥楶lease 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>
    );
  }
}

銆€銆€