在react項目里 ，如何優(yōu)化這段代碼？

renderFooter2 (quantity) {
        const _self = this;

        console.log('showPageNumber = ', _self.state.showPageNumber)

        let wordStyle = {
            color: 'rgba(71,129,255,1)'
        }

        let numberFrameCommon = {
            width: 38,
            height: 38,
            marginLeft: 10,
            cursor:'pointer'
        }

        let numberFrame = {
            ...numberFrameCommon,
            background: 'rgba(71, 129, 255, 1)',
            color: 'rgba(255, 255, 255, 1)',
        }

        let numberFrame2 = {
            ...numberFrameCommon,
            background: 'rgba(27, 29, 45, 1)',
            color:'rgba(99, 107, 138, 1)'
        }

        let ellipsisStyle = {
            ...numberFrameCommon,
            background: 'rgba(27, 29, 45, 1)',
            color:'rgba(99, 107, 138, 1)'
        }

        let data = [];

        for(let di=1; di<=_self.state.showPageNumber; di++) {
            data[di-1] = di;
        }

        return (

            data.map((item, index, arr) => {

                //console.log('item = ', item);
                //console.log('index = ', index);
                if(index === 0) {
                    return (<div
                        key = {index}
                        style = {
                            _self.state.currentClickPage === index?
                                numberFrame : numberFrame2
                        }
                        className={'numberFrame'}
                        onClick={() => this.showPageData(index)}
                    >
                        {index+1}
                    </div>)
                } else if( index === 1 ) {
                    return (<div
                        key = {index}
                        style = {ellipsisStyle}
                        className={'numberFrame'}
                    >
                        ...
                    </div>)
                } else if( index<_self.state.currentClickPage &&
                    _self.state.currentClickPage-index<4 ) {
                    return (<div
                        key = {index}
                        style = {
                            _self.state.currentClickPage === index?
                                numberFrame : numberFrame2
                        }
                        className={'numberFrame'}
                        onClick={() => this.showPageData(index)}
                    >
                        {index+1}
                    </div>)
                } else if ( index === _self.state.currentClickPage ) {
                    return (<div
                        key = {index}
                        style = {
                            _self.state.currentClickPage === index?
                            numberFrame : numberFrame2
                        }
                        className={'numberFrame'}
                        onClick={() => this.showPageData(index)}
                    >
                        {index+1}
                    </div>)
                } else if (index>_self.state.currentClickPage &&
                    index-_self.state.currentClickPage<5 ) {
                    return (<div
                        key = {index}
                        style = {
                            _self.state.currentClickPage === index?
                                numberFrame : numberFrame2
                        }
                        className={'numberFrame'}
                        onClick={() => this.showPageData(index)}
                    >
                        {index+1}
                    </div>)
                } else if (index-_self.state.currentClickPage === 5) {
                    return (<div
                        key = {index}
                        style = {ellipsisStyle}
                        className={'numberFrame'}
                    >
                        ...
                    </div>)
                } else if (index === _self.state.showPageNumber-1) {
                    return (<div
                        key = {index}
                        style = {
                            numberFrame2
                        }
                        className={'numberFrame'}
                        onClick={() => this.showPageData(index)}
                    >
                        { _self.state.showPageNumber}
                    </div>)
                }
            })
        )

    }