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應用

export default class Demo extends React.Component {
            state={
                visible:false
            }
            boxshow=()=>{
                this.setState({visible:true})
            }
            boxhide=()=>{
                this.setState({visible:false})
            }
          render(){
            return (
                <div>
                        <button onClick={this.boxshow}>點我顯示</button>
                        <button onClick={()=>{this.boxhide()}}>點我隱藏</button>
                        { this.state.visible ? [<div className="box">我是Box</div> ] : [ null ] }
                        { this.state.visible ? <div className="box">我是Box</div> :  null }   //加不加 [] 視狀況而定
                       
                </div>
               
            );
    }
}

正則表達式使用

以郵箱正則驗證爲例
export default class Demo extends React.Component {
        
        handleEmail(e){
        let value= e.target.value;
        if( ! ( /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(value) ) ){
                console.log("請輸入正確的郵箱");
           }
        }

        render(){
            return(
                <div>
                    <Input placeholder="請輸入郵箱" type="text" onChange={this.handleEmail.bind(this)} />
                </div>
            );
        }
}

antd,modal屬性

antd modal.success小提示框添加api

function success(){
    Modal.success({
        title:"系統提示",
        content:"短連接複製成功",
        centered:true,            //屬性這樣寫
        mask:true,
        maskClosable:true,
        okText:"肯定",
    })  
}


antd標準模態框裏將"肯定"按鈕去除，只保留一個"取消"按鈕
<Modal
     title="關鍵字"
     visible={this.state.visible}
     onOk={this.handleOk}
     onCancel={this.handleCancel}
     width={1000}
     centered={true}
     footer={(                                 //這一段代碼設置了footer裏的按鈕屬性
        <div style={{textAlign:"center"}}>
            <Button key="back" onClick={this.handleCancel} style={{padding:"0 35px"}}>取消</Button>   
         </div>
      )}  >

      <div>
            content
      </div>
</Modal>

react裏寫js

`${js代碼}`

react插入圖片

單張引入

兩種辦法能夠解決圖片很少，在前端直接加載圖片路徑的問題

第一種：import方法
import logos from '../../assets/images/logos.png';//src/assets
render() {
        return (
            <img src={logos} alt="logo" />
        )；
    }


第二種：require方法
<img alt="logo" src={require('../../assets/images/logos.png')}  />
使用這種方法切記  require裏只能寫字符串，不能寫變量

多張引入(適用於數據庫讀取)

假設須要從數據庫中讀取圖片的路徑，require不能寫變量，import from後面也不能寫變量，該怎麼辦，以下

json：

[
  {
    "name":'img1'
    "img":"img1",
    "url":""
  },
  {
    "name":"img2",
    "img":"img2",
    "url":""
  },
  {
    "name":"img3",
    "img":"img3",
    "url":""
  }
]



react：

import img1 from'./../images/img1.png';
import img2 from'./../images/img2.png';
import img3 from'./../images/img3.png';
 
const imgsArr = [img1,img2,img3];
 
render(){
    return(
        <div>
            {
                imgsArr.map(function(name){
                    return(
                        <img src={name} />
                    )
                }) 
            }
        </div>
    )
}

返回上一頁

this.props.history.goBack()

this.props.history.go(-1)       this.props.history.go(0) 當前頁

this.props.history.push("/demo/index/setting/settingindex")

map用法

this.state.keywords.map((item,index) => {
                                              return <Col span={4} className="code-keyword" key={index} onClick={() => {this.keywordsClick(item)}}><span>{item.content}</span></Col>;
                                            })

const的位置

//能夠在這裏const
export default class Demo extends React.Component{
    state={}
    render(){
        
        //也能夠在這裏const
        return();
    }
}

寫樣式

一、loading.style.display="block"

二、<div style={{display:"block",}}></div>

三、在less頁面中寫，在當前頁面引入·

刪除，彈出模態框詢問，回調函數寫在一個函數裏

productDelete=(productInfo)=>{
        Modal.confirm({
            title:"刪除產品",
            content:`您確認要刪除產品 "${productInfo.name}" 嗎？`,
            centered:true,
            okText:"肯定",
            cancelText:"取消",
            onOk:async()=>{
                let data=await api.productDeleteApi({
                    id:productInfo.id,
                })
                if(data.code===0){
                    this.onChangePage();
                    message.success(`產品 "${:productInfo.name}" 刪除成功！`)
                }else{
                    message.error(api.stateCode[data.code])
                }
            }
        })
    }

antd的table組件裏給數值編譯

this.columns=[
    {
        title:"姓名",
        dataIndex:"name",
    }
    {
        title:"狀態",
        dataIndex:"state",
        render(a){
            let config={
                "1":<Badge status="success" text="成功" />,
                "2":<Badge status="error" text="報錯" />,
                "3":<Badge status="default" text="正常" />,
                "4":<Badge status="processing" text="進行中" />,
                "5":<Badge status="warning" text="警告" />,
            }
                return config[a];
        }
    }
]

antd的Modal調用後，頁面樣式產生變更

antd 的Modal在調用後，會在body里加上style={{paading-right:"17px",overflow:"hidden"}}樣式
這個樣式的本意是若是模態框內容過多致使模態框超出頁面高度，那麼右側會有滾動條出現，模態框即可以滾動而且此滾動條會覆蓋以前的滾動條。
可是今天遇到一個由於這個引起的問題：就是若是當前頁面內容已經超出頁面高度時，右側原本就是會有滾動條的。
如圖


而此時若是再調用模態框，那麼滾動條之間就會產生衝突，從而引起頁面樣式的小變更。
解決方法：給當前頁面的body設置樣式   
        body{
           padding:0!important;
           margin:0!important;
           overflow:visible!important;
      }
注：此方法當前頁面全局使用可能會帶來其餘問題，請謹慎使用。