React.js使用Nuka-Carousel插件时禁用越界效果

前段时间在项目中采用了Nuka-Carousel这个轮播图/走马灯插件来实现整屏上下滑的效果，但是在实际开发中遇到了越界效果始终存在的问题，这个效果在某些场景下会起到适得其反的效果。

哪个属性控制越界效果？

Nuka-Carousel中，控制越界效果的是edgeEasing这个props属性，有多种效果可供选择，具体参考文档

怎么找到解决方法？

遇到这个问题的第一时间，是发挥各大搜索引擎的作用，搜索Nuka-Carousel关键字相关，不过很可惜并没有找到合适的答案。于是进入了Nuka-Carousel的github查看Issues，搜索关键字easing，顺利找到有与我相同需求的人，Is there a way to disable an edge easing? #203

怎么解决的？

1. 手动更改Nuka-Carousel包的文件，找到src/carousel.js，做如下修改

// 在大约65-75行之间找到edgeEasing: React.PropTypes.string，在下一行加入代码：
edgeEasingEnabled: React.PropTypes.bool,

// 在大约100行左右找到edgeEasing: 'easeOutElastic'，在下一行加入代码：
edgeEasingEnabled: true,

// 在大约250行左右找到
//self.setState({
//  left: self.props.vertical ? 0 : self.getTargetLeft(self.touchObject.length * self.touchObject.direction),
//  top: self.props.vertical ? self.getTargetLeft(self.touchObject.length * self.touchObject.direction) : 0
//});
// 改成：
self.props.edgeEasingEnabled && self.setState({
  left: self.props.vertical ? 0 : self.getTargetLeft(self.touchObject.length * self.touchObject.direction),
  top: self.props.vertical ? self.getTargetLeft(self.touchObject.length * self.touchObject.direction) : 0
});

// 在大约320行左右找到
//self.setState({
//  left: self.props.vertical ? 0 : self.getTargetLeft(self.touchObject.length * self.touchObject.direction),
//  top: self.props.vertical ? self.getTargetLeft(self.touchObject.length * self.touchObject.direction) : 0
//});
// 改成：
self.props.edgeEasingEnabled && self.setState({
  left: self.props.vertical ? 0 : self.getTargetLeft(self.touchObject.length * self.touchObject.direction),
  top: self.props.vertical ? self.getTargetLeft(self.touchObject.length * self.touchObject.direction) : 0
});

同理，修改lib/carousel.js，与上述基本一致。

2. 使用Nuka-Carousel组件时传入edgeEasingEnabled = {false}属性

注意事项：

做了如上修改之后，用git管理代码，在别的电脑或其他人协作开发，都可能无法同步到你对这个包的修改（因为node_modules文件夹通常不会被git同步），所以要做好文档说明备注。在Nuka-Carousel官方对这个问题进行补充修复之前，只能通过这种方式来修改。