javascript - reactjs航点导入问题
问题描述
我正在尝试合并 jquery waypoints 模块。在每次尝试在 reactjs 中使用模块时,我都遇到了所有这些问题。-在这种情况下,我得到了一个未定义的每个 - 但我什至尝试使用本地版本的 lib 并添加到文件的顶部
window.jQuery = window.$ = require("jquery");
http://imakewebthings.com/waypoints/guides/getting-started/
http://imakewebthings.com/waypoints/api/waypoint/
http://imakewebthings.com/waypoints/shortcuts/inview/
in some instances - it errors -- "TypeError:`_libs_jquery_waypoints_js__WEBPACK_IMPORTED_MODULE_3___default.a is not a constructor"`
https://github.com/imakewebthings/waypoints/issues/559
像这样导入
import Waypoint from './libs/jquery.waypoints.js';
代码
var ele
new Waypoint({
element: ele = $('.threesixty')[0],
handler: function(direction) {
if (direction == 'down') {
$(ele).addClass('muestra')
} else {
$(ele).removeClass('muestra')
}
console.log(direction);
}
});
解决方案
我能够通过以下方式导入它。 http://jsfiddle.net/Lfhepta3/7/
从 lib 文件导入。
import waypoint from './libs/jquery.waypoints.js';
https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js
在文件的顶部 - 我添加了以下行
window.jQuery = window.$ = require("jquery");
——那么我用过的用法是这样的。
var elem = "vision0";
var $el = $('.'+elem);
$el.waypoint(function(direction) {
if (direction == 'down') {
$el.addClass("js-"+elem+"-animate");
} else {
$el.removeClass("js-"+elem+"-animate");
}
}, {
offset: '50%'
});
div是这样的
<img className="vision0" src={require(`img/${this.props.data.image}`)} width="900" />
推荐阅读
- javascript - 打字稿 - 停止组件的破坏
- azure - Azure App Service Deploy 版本 4 - 未找到 *.deploy.cmd
- azure - 无法从 AKS 群集访问 Azure MySQL DB
- javascript - font-awesome 图标不会过渡 transform:rotate(180deg)
- c - 为什么声明结构指针会阻止文件读取?
- twitter-bootstrap - Bootstrap 4 Carousel 过渡意外行为
- qt - 鼠标悬停或在项目之间显示不同颜色的拖放突出显示
- android - 是否可以在 2 台设备之间使用 Google Cloud Anchors?
- javascript - 这个 js 代码是如何工作的?
- python - 在opencv中找到带有绿色和紫色的颜色的精确hsv值