react实现饿了吗左右级联列表

最近在学校写一个小项目，要求实现一个类似饿了么的网站，但是不是卖人吃的，卖的是。。。。。

从网上找了找没有找到比较好的，所以决定自己动手写一个。

其实左右级联实现的方法其实也很简单，设置父元素的css

 height: 100%;
 overflow: scroll;

因为用的是百分比，所以最好先设置一个固定高度，父元素高度固定，让多余的元素可以以滚动条的方式显示出来

然后我们需要做的就是监听这个父元素的scroll事件

componentDidMount() {
        const node = this.refs.active;
        node.addEventListener('scroll',this.handleChange.bind(this))；
}

通过ref可以很快找到这个dom元素，然后监听到这个元素，这里需要将监听写到dom渲染完后，然后记得在离开页面的时候应该将监听移除，避免影响性能。

然后判断他滚动到哪里，我选择的方法是在初始化的时候将子元素的在竖轴上的位置记录下来，然后在handleChange这个方法里，通过比较e.target.scrollTop这个数值与计录好的位置坐标一一比较来判断他已经滚到哪里了

然后至于左边的点击就很好实现了，每次点击时

 handleClick(item){
        let dom = this.refs.active;
        if( item === 0 ){
            dom.scrollTop = 0;
        }
        else{
            dom.scrollTop = arr[item-1];
        }
    }

在arr里保存了位置，根据item的值将父元素的滚动条设置到指定高度就ok了

在滚动时应该设置一个范围比如说 与俩个坐标之间减个200px，也就是说那个元素要快露出来的时候将它设置过去，这样就显得自然一点，不会太僵硬。

findIndex( targetHeight ){
        let i=0;
        for ( i = 0; i < arr.length - 1 ; i++) {
                if(target >= ( arr[i] - 200 ) && target <= arr[i+1] - 200){
                    return i+1;
                }
        }
        return 0;
    }

将高度传进去计算出一个大致的item值，ok，大致思想就是这样。