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 (
    

        Button
    
  );
}

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 (
        

            
        
    );
};

const foo2 = Cmp => props => {
    return (
        

            
        
    );
};

@foo
@foo2
class Child extends Component{
    render(){
        return 

            Child
        
    }
}
@foo2
class HocPage extends Component {
    render(){
        return (
            

                
HocPage
                
                click
            
        );
    }
}

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 (
            

                
FormPage
                

                    
                    {getFieldDecorator("name", { rules: [nameRules] })()}
                    
                    
                    {getFieldDecorator("password",{ rules: [passwordRules] })()}  
                    
                
                submit
            
        )
    }
}

export default FormPageAntd;