$（...）。图钉是不是一个函数 - reactJs，Materialisecss

我用jquery和materializecss构成了页面。所有的js都很好用。但是，一旦我将它转移到react组件中，js脚本就停止了工作。

这里的组件。正如你所看到的，上面有另一个js初始化权限，来自相同的materialize.min.js，并且它完美地工作。为什么第二个不是？

var React = require('react'); 

var CharSpy = React.createClass({ 
    componentDidMount: function() { 
    // this one works well 
    $('.scrollspy').scrollSpy(); 
    // this one doesn't work 
    $('.tabs-wrapper').pushpin({ offset: 65 }); 
    }, 
    render: function() { 
     return (
     <div className="tabs-wrapper"> 
      <ul className="section table-of-contents"> 
      <li><a href="#user"><span className="hide-on-small-only">Профиль</span></a></li> 
      <li><a href="#abilities"><span className="hide-on-small-only">Способности</span></a></li> 
      <li><a href="#activity"><span className="hide-on-small-only">Статистика</span></a></li> 
      <li><a href="#skillmap"><span className="hide-on-small-only">Карта</span></a></li> 
      <li><a href="#comments"><span className="hide-on-small-only">Комментарии</span></a></li> 
     </ul> 
     </div> 
     ); 
    } 

}); 

module.exports = CharSpy;

错误：

Uncaught TypeError: $(...).pushpin is not a function 
React.createClass.componentDidMount @ main.js:22993 
assign.notifyAll @ main.js:3920O 
N_DOM_READY_QUEUEING.close @ main.js:17089 
Mixin.closeAll @ main.js:19861 
Mixin.perform @ main.js:19802 
batchedMountComponentIntoNode @ main.js:15144 
Mixin.perform @ main.js:19788 
ReactDefaultBatchingStrategy.batchedUpdates @ main.js:12271 
batchedUpdates @ main.js:18015 
ReactMount._renderNewRootComponent @ main.js:15279 
ReactPerf.measure.wrapper @ main.js:16518 
ReactMount.render @ main.js:15368 
ReactPerf.measure.wrapper @ main.js:16518 
(anonymous function) @ main.js:23680 
React.createClass.statics.run.dispatchHandler @ main.js:1852(
anonymous function) @ main.js:1820(
anonymous function) @ main.js:874(a 
nonymous function) @ main.js:874Tr 
ansition.to @ main.js:877(a 
nonymous function) @ main.js:1819T 
ransition.from @ main.js:856di 
spatch @ main.js:1816r 
efresh @ main.js:1867r 
un @ main.js:1863r 
unRouter @ main.js:25552 
25../components/app @ main.js:23679 
s @ main.js:1e @ 
main.js:1(ano 
nymous function)

来源

2015-06-27 stkvtflw

它看起来像缺少jQuery插件。但是这可能意味着你使用的是错误的插件版本，或者直到它抛出TypeError之后才加载。 –

我已经使用完全相同的jquery版本而没有做出反应 – stkvtflw

如果反应导入了不同的版本？（只是抛出想法，我不知道什么反应和materializecss是或如何管理JavaScript模块。） –

问题与文件准备好被称为实际插件里面做。如果你使用的是反应，那么你可能使用了诸如browserify或者webpack之类的东西。在反应中，你正在调用componentDidMount函数中的图钉，但图钉没有定义自己。

基本上你正在做的是：

定义的jQuery（文档准备现在解雇，如果你需要使用（jQuery的）语法）
定义图钉

内图钉，它会监听准备好的文档，该文档已经被解雇了，所以它从来没有定义自己。

你可以得到它通过移除图钉插件内两行工作，行其中两个就是：

$(document).ready(function() {

和在线61一路下滑，删除右括号：

});

现在，当您需要图钉库（或其他需要它的东西，比如materializecss）时，图钉函数将立即定义，并且不会抛出有关未定义函数的错误。

来源

2015-10-09 18:10:27 user2415002

我得到与另一个插件ionRangeSlider相同的错误。我需要遵循同样的事情吗？ – ApurvG

我没有$（document）.ready（function（）{在我的ionRangeSlider插件中。 – ApurvG

$（...）。图钉是不是一个函数 - reactJs，Materialisecss

回答

相关问题