1 新增相應的react所需的包及外掛

npm install react -s
npm install react-dom -s

2 滑鼠滾輪事件及引用子元件的滾輪處理事件

 handleWheel: function (event) {

            //判斷滑鼠滾輪的上下滑動
            let deta = event.deltaY;
            if(deta > 0){
            this.setState({
                indexs:1
            });
                console.log
 
(this.state.indexs+"bottom");
            }
            if(deta < 0){
                this.setState({
                    indexs:-1
                });
                console.log(this.state.indexs+"top");
            }

            this.refs.getPosition.mouseWheel(this.state.indexs);

        },

        render : function() {
            return <div onWheel={this.handleWheel
 
} className="main">
                    <Nav ref="getPosition"  indexs={this.state.indexs}></Nav>
                </div>
        }

3 滑鼠滾輪處理事件

//對滑鼠滾輪傳入的資料進行判斷及處理
 mouseWheel:function (indexs) {
              let inx = this.state.Move_index;
              indexs = indexs + inx;
            console.log(indexs+"indexs"
 
);
            if (indexs >= 0 && indexs <= 3){
                this.setState({
                    Move_index:indexs
                });
            }else if (indexs < 0){
                this.setState({
                    Move_index:0
                })
            }else if (indexs > 3){
                this.setState({
                    Move_index:3
                })
            }
              this.position(indexs);
        },

        //依據滑鼠滾輪傳入的資料改變所需的狀態
        position(numder){
            console.log(numder+"list");
            switch (numder){
                case 0:return this.setState({
                    Move_index:0
                });
                case 1:return this.setState({
                    Move_index:1
                });
                case 2:return this.setState({
                    Move_index:2
                });
                case 3:return this.setState({
                    Move_index:3
                });
            }

        },