react 常用組件整理

 0.es6語法糖

deptList = deptnameList.filter(item => item.rel ===this.state.thUser.orgId);//返回一個新的數組對象

deptList = deptnameList.find(item => item.rel ===this.state.thUser.orgId); //這個返回的是個object 是個對象

 

Demo （ng2語法）

data：

var types = [
     {name: "訂單未付款", ids: "14"},
     {name: "訂單已付款", ids: "10"},
     {name: "已收貨", ids: "15"},
     {name: "已失效", ids: "16"},]

let currentObj = this.newTypes.find(item => item.ids == obj.type);
this.now.typeName = currentObj ? currentObj.name : '';//編輯時回顯用戶選中的分類文字

 

 

 

 

 

const array = [{id: 1, name: 'a'}, {id: 2, name: 'b'}, {id: 3, name: 'c'}];
let obj2 = array.filter(obj => obj.id === 1); //獲取id=1的那個對象
console.log('當前對象', obj2);  

 

7.select  //默認需要傳入一個字符串，需要一個不重復的key

const selectOptions = [{ value: '0', labelName: '全部' }, { value: '1', labelName: '正確' }, { value: '2', labelName: '錯誤' }, { value: '3', labelName: '未處理' }];
        return [{
          type: 'rangeDatePicker',
          item: { label: '錄入時間' },
          name: '__date',
          options: {
            initialValue: startTime && endTime ? [moment(startTime), moment(endTime)] : [],
          },
          props: {
            placeholder: ['開始時間', '結束時間'],
            format: 'YYYY-MM-DD'
          }
        }, {
          type: 'select',
          item: { label: '處理狀態' },
          name: 'zt',
          options: {
            initialValue: '0'
          },
          selectOptions: selectOptions.map((item) => ({ value: item.id, label: item.labelName }))
        }

 

 

 

1.下拉菜單和單選按鈕

import {Form, Input, Row, Col, Button, Card, DatePicker, Radio, Select} from 'antd';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;

render() {

let optionValue = this.store.user.search_at + '';//后台接口返回的是int類型，組件需要string類型，需要先轉換一次
let radioValue = this.store.user.search_from + '';
let sexValue = this.store.user.sex + '';
let statusValue = this.store.user.status + '';

return (

　　　　　　　　　　　　<FormItem label="時間">
                            {getFieldDecorator('search_at', {
                                initialValue: optionValue//加載默認值
                            })(
                                <Select>
                                    <Option value="0">全部時間</Option>
                                    <Option value="1">最近一周</Option>
                                    <Option value="2">最近一月</Option>
                                    <Option value="3">最近一年</Option>
                                </Select>
                            )}
                        </FormItem>

                        <FormItem label="關鍵詞位置">
                            {getFieldDecorator('search_from', {
                                initialValue: radioValue//加載默認值
                            })(
                                <RadioGroup>
                                    <Radio value="1">標題</Radio>
                                    <Radio value="0">標題+正文</Radio>
                                </RadioGroup>
                            )}
                        </FormItem>
)}

 

2.格式化日期可以在兩個位置處理，

第二種，在

render() {}函數里面處理，

 const enterpriseCols = [{
            title: '時間',
            dataIndex: 'gprq',
            key: 'gprq',
            render: (text) => {
                //console.log('text', text);
                if (!text) {
                    return '';
                }
                return (text.slice(0, 10));
            }
        },

 

3.日期組件：（默認顯示當前日期，默認顯示當前月的一號）

<DatePicker />

 const startTime = moment().format('YYYY-MM');//當月的一號
        const endTime = moment().format('YYYY-MM-DD');//當前日期
        //alert(moment.isMoment(endTime));
        console.log('endTime',endTime);
//先初始化需要的參數值

//組件中引用
<Form layout="inline" onSubmit={this.handleSubmit}>
                            <FormItem label="采集開始時間">
                                {getFieldDecorator('startTime', {
                                    rules: [{
                                        required: true, message: '請選擇采集開始時間!',
                                    }],
                                    initialValue: moment(startTime)
                                })(
                                    <DatePicker/>
                                )}
                            </FormItem>
                            <FormItem label="采集截止時間">
                                {getFieldDecorator('endTime', {
                                    rules: [{
                                        required: true, message: '請選擇采集截止時間!',
                                    }],
                                    initialValue: moment(endTime)
                                })(
                                    <DatePicker />
                                )}
                            </FormItem>
                            <FormItem>
                                <Button type="primary" htmlType="submit">查詢</Button>
                            </FormItem>
                        </Form>

 

 5.react 下拉選擇框動態渲染模式

 

 

//render() 前面加入下面操作
renderOptions = () => {
        const hotWords = this.store.cityList.length === 0 ? [] : this.store.cityList;
        if (!hotWords || hotWords.length === 0) {
            return <Option value="暫無數據" key='-1'>暫無數據</Option>
        }
        return hotWords.map((doc,idx) =>
            (
                <Option  key={idx}  value={doc.value}>{doc.name}</Option>
            ))

    };



//return前面加入下面操作

const optionElement = this.renderOptions();

<FormItem label="登記區域">
    {getFieldDecorator('area', {
        // initialValue: "%"渝中區 渝北區 九龍坡區  大渡口區   江北區   沙坪壩區      南岸區    北碚區      巴南區
    })(
        <Select  showSearch style={{width: '12rem'}}
                 optionFilterProp="children"
                 onChange={this.handleChange}
                 filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                 placeholder="--請選擇--">
            {optionElement}
        </Select>
    )}
</FormItem>

 

7.一個重要的標簽dangerouslySetInnerHTML：react界面中使用dom結構

{article.description ? <div className="art-abstract">
                        <h3>內容摘要：</h3>
                        <p>{article.description}</p>
                      </div> : ''}
                        <div className="content" style={{border: '0'}}>
                            <div className="articleTable" dangerouslySetInnerHTML={{__html: article.content}}>
                            </div>
                        </div>