react学习自我总结

以下是本菜鸟总结的一些自己的经验，其实是写给自己看的，因此代码也可能不规范，如果被您看到了，请见谅哟。

我的编写习惯

如上图
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学习自我总结

原文：https://www.cnblogs.com/huihuihero/p/10834600.html