初学react，这段代码怎么优化？

Question

renderFooter (quantity) {

        const _self = this;

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

        let numberFrameCommon = {
            width: 40,
            height: 40,
            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 = {
            width:40,
            height:40,
            background: 'rgba(27,29,45,1)',
            marginLeft:10,
            fontSize:'14px',
            borderRadius: '2px',
            fontFamily: 'MicrosoftYaHei',
            color:'rgba(99,107,138,1)'
        }


        let data = [];

        for(let di=1; di<=_self.state.pageQuantity; di++) {
            data.push(di)
        }

        //console.log( 'pageQuantity = ', _self.state.pageQuantity )

        if ( _self.state.pageQuantity <= 10 ) {
            return (
                data.map((item, index, arr) => {

                    //console.log('item = ', item);
                    //console.log('index = ', index);

                    return (<div
                        key = {index}
                        style = {
                            _self.state.footFlag === index ?
                                numberFrame: numberFrame2
                        }
                        className={'numberFrame flexCenter'}
                        onClick={() => this.showPageData(index)}
                    >
                        {index+1}
                    </div>)

                })
            )
        }  else if ( _self.state.pageQuantity >10 ) {

            return (

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

                    //console.log('item = ', item);
                    //console.log('index = ', index);
                    if(index<9) {
                        return (<div
                            key = {index}
                            style = {
                                _self.state.footFlag === index ?
                                    numberFrame: numberFrame2
                            }
                            className={'numberFrame flexCenter'}
                            onClick={() => this.showPageData(index)}
                        >
                            {index+1}
                        </div>)
                    } else if ( index === 9) {
                        return (<div
                            key = {index}
                            style = {ellipsisStyle}
                            className={'numberFrame'}
                        >
                            ...
                        </div>)
                    } else if (item === _self.state.pageQuantity) {
                        return (<div
                            key = {index}
                            style = {numberFrame}
                            className={'numberFrame'}
                            onClick={() => this.showPageData(index)}
                        >
                            {item}
                        </div>)
                    }
                })
            )

        }

    }

Answer 1

逻辑应该不需要怎么优化，写法可以优化

• 比如前半部分代码剥离出去，单独作为一个方法调用
• 每个if else分支单独写一个方法调用

Answer 2

• 抽离样式
• 不需要又用for，又用map，直接map即可。