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

); } } 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] })()}
) } } export default FormPageAntd;

你可能感兴趣的:(React组件化四-antdUI)