以下是本菜鳥總結的一些自己的經驗，其實是寫給自己看的，因此代碼也可能不規範，如果被您看到了，請見諒喲。

我的編寫習慣

如上圖
1 命名：以name-subname.js命名
2 暴露組件命名： 以文件命名為基礎，NameSubname
3 根標簽給到的<div>,給定一個className並以文件名命名，
  className="name-subname"。這樣做是方便在less裏面寫樣式，
  直接在.name-subname{ }裏面寫本頁面的樣式，和其他頁面互不影響
4 頁面的組件部分，以jsx後綴，頁面部分，以js後綴。好區分，也可以以大小寫命名來區分，組件一般大寫命名。
 

日期選擇組件設置為中文

import zh_CN from 'antd/lib/locale-provider/zh_CN';
import 'moment/locale/zh-cn';
import {LocaleProvider} from 'antd'   


<LocaleProvider locale={zh_CN}>   //在日期組件外面包裹此標簽
        <RangePicker
          showTime={{format:"HH:mm"}}
          format="YYYY-MM-DD HH:mm"
          placeholder={["開始時間","結束時間"]}
          onChange={onChange}
          onOk={onOk}
         />
 </LocaleProvider>
 

form表單需要額外Form.create並且暴露組件

class ModalForm extends React.Component {   //這裏不要暴露(export default)組件
      
      render (){
          const { getFieldDecorator } = this.props.form;
          return (
              <div className="formdemo">
                    <Form onSubmit={this.handleSubmit} {...FormStyle}>
                    <Form.Item label="聯系人" className="mb-10px">
                        {getFieldDecorator('linkman',{
                            rules:[{
                                required:true,
                                message:"請輸入聯系人"
                                }]
                            })(<Input placeholder="請輸入聯系人" />)}
                    </Form.Item>
                    <Form.Item label="客戶需求" className="mb-10px">
                        {getFieldDecorator("clientneed",{
                            rules:[{required:true}]
                        })(
                            <TextArea placeholder="請輸入客戶需求/備註" style={{resize:"none"}}/>
                        )}
                    </Form.Item>
                </Form>
              </div>
            );
      }
}

const ModalForm1 = Form.create({})(ModalForm);   //這裏用Form.create({}),並且暴露組件
export default ModalForm1;
 

表格在export defult class ...內部使用

import React from 'react';
import 'comp.less';
import {Table} from 'antd';

const data=[{    
    key: "1",
    name:"亞索",
    age:"18",
    sex:"男",
    weight:"60kg",
},{
    key: "1",
    name:"劍姬",
    age:"19",
    sex:"女",
    weight:"60kg",
}]

export default class TableDemo extends React.Component{
    constructor(props){
        super(props);
        this.columns=[       //this.columns 寫在構造器裏
            {title:"姓名",dataIndex:"name"},
            {title:"年齡",dataIndex:"age"},
            {title:"性別",dataIndex:"sex"},
            {title:"體重",dataIndex:"weight"},
            {
            title:"愛好",
            key:"like",
            render:()=>(     //如果表格裏需要插入html元素或者其他復雜一點的東西，那麽可以通過render來寫
                <span>
                    <a href="# ">補兵</a>
                    <a href="# "}>搶人頭</a>
                </span>
            ),
        }]
    }
    render(
        <div className="tabledemo">
              <Table rowSelection={rowSelection} columns={this.columns} dataSource={data} />      //這裏columns={this.columns},要用this.
        </div>
    );
}

state的true與false應用

react學習自我總結