React组件化四-antdUI

npx create-react-app lesson3
cd lesson3
npm start
安装antd
npm install antd --save
or
yarn install antd -S

使用

import React from 'react';
import Button from 'antd/es/button';
import "antd/dist/antd.css";

function App() {
  return (
    <div className="App">
        <Button type="primary">Button</Button>
    </div>
  );
}

export default App;

配置antd的按需加载
安装react-app-rewired customize-cra babel-plugin-import

npm install react-app-rewired customize-cra babel-plugin-import -D

支持装饰器配置

npm install -D @babel/plugin-proposal- decorators
or
yarn add @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D

修改package.json

"scripts": {
"start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-app-rewired eject"
},

根目录创建config-overrides.js 配置按需加载和装饰器

const {
   override, 
   fixBabelImports,
   addDecoratorsLegacy,
} = require("customize-cra");

module.exports = override( 
   fixBabelImports("import", {//antd按需加载
   libraryName: "antd", 
   libraryDirectory: "es",
    style: "css"
}),
   addDecoratorsLegacy(),//配置装饰器
);

基本使用

src创建pages/HocPage.js 在App.js引入

import React,{Component} from "react";
import {Button} from "antd";

//高阶组件
const foo = Cmp => props => {
    return (
        <div className="border">
            <Cmp {...props}/>
        </div>
    );
};

const foo2 = Cmp => props => {
    return (
        <div className="border" style={{
            border:"solid 1px red"
        }}>
            <Cmp {...props}/>
        </div>
    );
};

@foo
@foo2
class Child extends Component{
    render(){
        return <div className="border">
            Child
        </div>
    }
}
@foo2
class HocPage extends Component {
    render(){
        return (
            <div>
                <h1>HocPage</h1>
                <Child/>
                <Button type="dashed">click</Button>
            </div>
        );
    }
}

export default HocPage;

antd里面的Form使用 不用自己手写value和onChange

创建src/pages/FormPageAntd.js

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

const nameRules = { required: true, message: "please input ur name" };
const passwordRules = { required: true, message: "please input ur password" };

@Form.create()
class FormPageAntd extends Component {
  submit = () => {
    const { getFieldsValue, getFieldValue, validateFields } = this.props.form;
    validateFields((err, values) => {
      if (err) {
        console.log("err", err);
      } else {
        console.log("submit", values);
      }
    });
    // console.log("submit", getFieldsValue(), getFieldValue("name"));
  };
    render() {
        const { getFieldDecorator } = this.props.form;
        console.log("props", this.props.form);
        return (
            <div>
                <h1>FormPage</h1>
                <Form>
                    <Form.Item label="姓名">
                    {getFieldDecorator("name", { rules: [nameRules] })(<Input />)}
                    </Form.Item>
                    <Form.Item label="密码">
                    {getFieldDecorator("password",{ rules: [passwordRules] })(<Input type="password"/>)}  
                    </Form.Item>
                </Form>
                <Button onClick={this.submit}>submit</Button>
            </div>
        )
    }
}

export default FormPageAntd;