在react項(xiàng)目中，我寫的這段代碼很冗余，如何把重復(fù)的部分合并？

問題一

我想把handleTelecomClick和handleUnicomClick中設(shè)置state屬性的方法都合并到stateChange里面，如何才能實(shí)現(xiàn)

問題二

我想把 let tdStyleOdd 和 let tdStyleEven 中冗余的部分合并，請問如何才能實(shí)現(xiàn)？

源代碼

import React from 'react';

class SelectButton extends React.Component {

    constructor() {
        super();
        this.state = {
            tableBody: [],
            telecomData: 0,
            telecomReceive: 0,
            // 數(shù)據(jù)
            unicomData: 50,
            unicomReceive: 80,
            // 傳遞給地圖的數(shù)據(jù)
            selectFlagChina: 'dataChinaTelecom'
        }

        this.handleTelecomClick = this.handleTelecomClick.bind(this);
        this.handleUnicomClick = this.handleUnicomClick.bind(this);
    }

    handleTelecomClick (){
        this.setState({
            // 數(shù)據(jù)
            telecomData: 50,
            telecomReceive: 80,
            // 傳遞給地圖的數(shù)據(jù)
            selectFlagChina: 'dataChinaTelecom'
        })
    }


    handleUnicomClick (){
        this.setState({
            // 數(shù)據(jù)
            unicomData: 50,
            unicomReceive: 80,
            // 傳遞給地圖的數(shù)據(jù)
            selectFlagChina: 'dataChinaTelecom'
        })
    }

    render() {

        let backgroundColor = ['rgba(56,145,255,0.1)','rgba(0,0,0,0)']

        let tdStyleOdd = { // 奇數(shù)
            textAlign: 'center',
            fontSize: 20,
            height: 20,
            color: 'rgba(255,255,255,0.6)',
            backgroundColor:backgroundColor [1]

        }

        let tdStyleEven = {
            textAlign: 'center',
            fontSize: 20,
            height: 20,
            color: 'rgba(255,255,255,0.6)',
            backgroundColor:backgroundColor [0]
        }

        let thStyle = {
            fontSize: 20
        }


        let tableHeader = this.state.tableHeader.map(function (head,index) {
            if(head == 'index'){
                return '序號';
            } else if (head == 'type') {
                return '任務(wù)名稱';
            } else if (head == 'level') {
                return '告警等級';
            } else if (head == 'message') {
                return '告警信息';
            }
        })

        return (
            <div>
                <div style={'selectButton'}>

                    <button>
                        <span>電信</span>
                    </button>

                    <button>
                        <span>聯(lián)通</span>
                    </button>

                </div>
            </div>
        )
    }



    componentDidMount() {


        this.stateChange(tableData)
    }

    stateChange(data){
        //console.log(receiveData);
        this.setState({
            tableBody: data

        })

    }

    componentWillReceiveProps(nextProps) {

        //console.log( nextProps.tableHeader )
        this.setState({
            tableBody: nextProps.tableBody
        });
    }
}

export default SelectButton;

新補(bǔ)充

問題2會了

this.state = {
            regionData:'', // 默認(rèn) - 地區(qū)顏色、點(diǎn)、線
            tableHeader: ['index', 'type', 'level', 'message'],// 默認(rèn) - 告警信息表頭
            tableData: [],// 默認(rèn) - 告警信息內(nèi)容
            delayTime: '', // 默認(rèn) - 鏈路延時(shí)時(shí)間最高Top10
            linksLostPackets: [], // 默認(rèn) - 鏈路丟包率最高Top10
            dataFlag: '', // 判斷數(shù)據(jù)變化

            // 輪詢?nèi)蝿?wù)欄相關(guān)的數(shù)據(jù)
            taskCarousel: 0, // 任務(wù)輪詢標(biāo)志 指針 到哪里就顯示哪里
            taskId: '', // 任務(wù)ID
            changeValue: '', // 任務(wù)欄改變值
            taskList_div: false,
            taskTotalNames: [], // 任務(wù)所有名稱
            taskUpdateNames: [], // 任務(wù)下拉列表中的名稱
            taskTotalIds: [], // 任務(wù)所有ID
            taskUpdateIds: [], // 任務(wù)下拉列表中的ID
            isShowAll: false, // 這個(gè)是控制 要不要 顯示所有任務(wù)
            clickLiName: '', // 這個(gè)默認(rèn)是顯示第一個(gè)
            isClickedLi: false, // 這個(gè)是默認(rèn)沒有點(diǎn)擊過li
            isLocked: false,
            hideOneLiIndex: 0,

            // 按鈕動態(tài)控制
            changeStyleFlag: false, // 按鈕的值
            rectangleFlag: false, // 控制電信樣式
            rectangleUnicomFlag: false, // 控制聯(lián)通樣式

            //電信
            regionDataTelecom: '', // 地區(qū)顏色、點(diǎn)、線
            tableHeaderTelecom: '', // 告警信息表頭
            tableDataTelecom: '', // 告警信息內(nèi)容
            delayTimeTelecom: '', // 鏈路延時(shí)時(shí)間最高Top10
            linksLostPacketsTelecom: '', // 鏈路丟包率最高Top10

            // 聯(lián)通
            regionDataUnicom: '', // 地區(qū)顏色、點(diǎn)、線
            tableHeaderUnicom: '', // 告警信息表頭
            tableDataUnicom: '', // 告警信息內(nèi)容
            delayTimeUnicom: '', // 鏈路延時(shí)時(shí)間最高Top10
            linksLostPacketsUnicom: '', // 鏈路丟包率最高Top10

            // 傳遞給地圖的數(shù)據(jù)

            taskIdChina:'',
            selectFlagChina: 'dataChinaTelecom',

            taskOldTotalNames: [],

            fisrtTaskId: '', // 第一次發(fā)送的 id 三個(gè) 0

            taskChangeFlag: false,
            taskReturnTotalNames: [],
            taskReturnTotalIds: [],

            // 第二次開始 發(fā)送id 同時(shí) 顯示樣式
            nextTaskList: [],
            nextTaskIds: [],
            nextClickLiName: [],
            nextHideOneLiIndex: 0,
            nextSendId:''

        }

這是我需要改變的值

有的時(shí)候時(shí)候，我需要

_self.setState({

                    // 默認(rèn) - 數(shù)據(jù)

                    regionData: returnData.dataChinaTelecom.regionData, // 地區(qū)顏色、點(diǎn)、線
                    tableHeader: returnData.dataChinaTelecom.emergencyTableHeader,//告警信息表頭
                    tableData: returnData.dataChinaTelecom.emergencyTableData,// 告警信息內(nèi)容
                    delayTime: returnData.dataChinaTelecom.linksDelayTime, // 鏈路延時(shí)時(shí)間最高Top10
                    linksLostPackets: returnData.dataChinaTelecom.linksLostPackets, // 鏈路丟包率最高Top10

                    // 電信 - 數(shù)據(jù)

                    regionDataTelecom: returnData.dataChinaTelecom.regionData, // 地區(qū)顏色、點(diǎn)、線
                    tableHeaderTelecom: returnData.dataChinaTelecom.emergencyTableHeader, // 告警信息表頭
                    tableDataTelecom: returnData.dataChinaTelecom.emergencyTableData, // 告警信息內(nèi)容
                    delayTimeTelecom: returnData.dataChinaTelecom.linksDelayTime, // 鏈路延時(shí)時(shí)間最高Top10
                    linksLostPacketsTelecom: returnData.dataChinaTelecom.linksLostPackets, // 鏈路丟包率最高Top10

                    // 聯(lián)通 - 數(shù)據(jù)

                    regionDataUnicom: returnData.dataChinaUnicom.regionData, // 地區(qū)顏色、點(diǎn)、線
                    tableHeaderUnicom: returnData.dataChinaUnicom.emergencyTableHeader, // 告警信息表頭
                    tableDataUnicom: returnData.dataChinaUnicom.emergencyTableData, // 告警信息內(nèi)容
                    delayTimeUnicom: returnData.dataChinaUnicom.linksDelayTime, // 鏈路延時(shí)時(shí)間最高Top10
                    linksLostPacketsUnicom: returnData.dataChinaUnicom.linksLostPackets, // 鏈路丟包率最高Top10

                })

有時(shí)候需要這樣

this.setState(
                {
                    // 數(shù)據(jù)
                    regionData: this.state.regionDataTelecom, // 地區(qū)顏色、點(diǎn)、線
                    tableHeader: this.state.tableHeaderTelecom,//告警信息表頭
                    tableData: this.state.tableDataTelecom,// 告警信息內(nèi)容
                    delayTime: this.state.delayTimeTelecom, // 鏈路延時(shí)時(shí)間最高Top10
                    linksLostPackets: this.state.linksLostPacketsTelecom, // 鏈路丟包率最高Top10

                    // 按鈕
                    changeStyleFlag: !this.state.changeStyleFlag,
                    rectangleFlag: !this.state.rectangleFlag,
                    rectangleUnicomFlag: !this.state.rectangleUnicomFlag,

                    // 傳遞給地圖的數(shù)據(jù)
                    selectFlagChina: 'dataChinaTelecom'
                }
            )

所有需要個(gè)通用的方法

回答

編輯回答

獨(dú)白

問題一：暫時(shí)沒想到。

問題二：

 let tdStyle = {
      textAlign: 'center',
      fontSize: 20,
      height: 20,
      color: 'rgba(255,255,255,0.6)',
    };
    let tdStyleOdd = {
      ...tdStyle,
      backgroundColor: backgroundColor[1],
    };
    let tdStyleEven = {
      ...tdStyle,
      backgroundColor: backgroundColor[0],
    };

2017年8月1日 00:19

編輯回答

九年囚

問題一：

stateChange = (obj)=>{
    let tmpState ={...this.state,...obj};
    const {tableBody,telecomData,telecomReceive,unicomData,unicomReceive,selectFlagChina} = tmpState; 
    this.setState({
        tableBody,telecomData,telecomReceive,unicomData,unicomReceive,selectFlagChina
    })
}

//使用舉例
handleTelecomClick (){
   this.stateChange({
       telecomData: 50,
       telecomReceive: 80,
       selectFlagChina: 'dataChinaTelecom'
   })
}

問題二：

let commonStyle = {
    textAlign: 'center',
    fontSize: 20,
    height: 20,
    color: 'rgba(255,255,255,0.6)'
}
let tdStyleOdd = {
    ...commonStyle,
    backgroundColor: backgroundColor[1]
}
let tdStyleEven = {
    ...commonStyle,
    backgroundColor: backgroundColor[0]
}

補(bǔ)充：

仔細(xì)看了一下問題，我覺得你可以對你的state里面的數(shù)據(jù)格式進(jìn)行優(yōu)化，比如

state= {
    dataChinaTelecom:{//電信數(shù)據(jù)
        regionData: '', // 地區(qū)顏色、點(diǎn)、線
        emergencyTableHeader: '', // 告警信息表頭
        emergencyTableData: '', // 告警信息內(nèi)容
        linksDelayTime: '', // 鏈路延時(shí)時(shí)間最高Top10
        linksLostPackets: '', // 鏈路丟包率最高Top10
    }
}
//數(shù)據(jù)格式和命名保持和后端返回一致   然后調(diào)用起來就簡單了
_self.setState({dataChinaTelecom:returnData.dataChinaTelecom})

2018年2月20日 01:09

編輯回答

清夢

首先，先針對這兩個(gè)問題，我覺的比較重要的是分析你覺的冗余的原因，進(jìn)而解決代碼冗余的問題。

問題一

我想把handleTelecomClick和handleUnicomClick中設(shè)置state屬性的方法都合并到stateChange里面，如何才能實(shí)現(xiàn)

分析問題

 handleTelecomClick() {
    this.setState({
            // 數(shù)據(jù)
      telecomData: 50,
      telecomReceive: 80,
            // 傳遞給地圖的數(shù)據(jù)
      selectFlagChina: 'dataChinaTelecom'
    });
  }

 handleUnicomClick() {
    this.setState({
            // 數(shù)據(jù)
      unicomData: 50,
      unicomReceive: 80,
            // 傳遞給地圖的數(shù)據(jù)
      selectFlagChina: 'dataChinaTelecom'
    });
  }

 stateChange(data) {
        // console.log(receiveData);
    this.setState({
      tableBody: data

    });
  }

這三段代碼，他們唯一冗余的地方就是this.setState，setState是React官方提供的方法，正常情況下，這個(gè)方法是不會變更的，所以你這里真沒有必要去解決冗余的問題。除非你對所有setState有特殊要求，那么你可以這樣寫。

mySetState( data ) {
    ...數(shù)據(jù)處理
    this.setState(處理的后的數(shù)據(jù))
}

stateChange(data) {
        // console.log(receiveData);
    this.mySetState({
      tableBody: data

    });
  }

不然我認(rèn)為真的沒必要。

問題二

我想把 let tdStyleOdd 和 let tdStyleEven 中冗余的部分合并，請問如何才能實(shí)現(xiàn)？

 const tdStyleOdd = { // 奇數(shù)
      textAlign: 'center',
      fontSize: 20,
      height: 20,
      color: 'rgba(255,255,255,0.6)',
      backgroundColor: backgroundColor[1]

    };

    const tdStyleEven = {
      textAlign: 'center',
      fontSize: 20,
      height: 20,
      color: 'rgba(255,255,255,0.6)',
      backgroundColor: backgroundColor[0]
    };

這兩段代碼，出現(xiàn)的就很奇怪，你僅僅只是為了奇偶行的背景顏色不相同，實(shí)現(xiàn)方式有三種。不過這個(gè)確實(shí)是冗余，因?yàn)槟闾厥獾闹皇瞧媾紭洳煌臅r(shí)的背景顏色，所以其他一個(gè)只有一個(gè)修改入口
第一種：使用純css實(shí)現(xiàn)

&:nth-child(odd) {
          background: rgba(56,145,255,0.1);
      }
       &:nth-child(even) {
          background: rgba(0,0,0,0);
      }

這個(gè)兼容性有點(diǎn)問題，IE9以后才支持。

第二種： css + js

color1 {

 background: rgba(56,145,255,0.1);

}

color2 {
background: rgba(0,0,0,0);
}

通過js設(shè)置不同的classes

第三種：純js

const commonStyle = {

  textAlign: 'center',
  fontSize: 20,
  height: 20,
  color: 'rgba(255,255,255,0.6)',

}

const tdStyleEven = Object.assign({},commonStyle, { background: 'rgba(56,145,255,0.1)' })

const tdStyleEven = Object.assign({},commonStyle, { background: 'rgba(0,0,0,0)'; })

以上代碼沒經(jīng)過測試，提供思路

2018年1月19日 09:07

編輯回答

北城荒

stateChange (type='unicom'){
        this.setState({
            // 數(shù)據(jù)
            [`${type}Data`]: 50,
            [`${type}Receive`]:80,
            // 傳遞給地圖的數(shù)據(jù)
            selectFlagChina: 'dataChinaTelecom'
        })
}

const commStyle = {
    textAlign: 'center',
    fontSize: 20,
    height: 20,
    color: 'rgba(255,255,255,0.6)'
},
tdStyleOdd = { // 奇數(shù)
    ... commStyle,
    backgroundColor:backgroundColor [1]
},
tdStyleEven = {
    ...... commStyle,
    backgroundColor:backgroundColor [0]
}

2018年4月17日 12:50