$(...).pushpin不是一个函数 - reactJs，Materializecss

Question

我用jquery和materializecss制作了一个页面，其中所有的js都很好地运行。但是当我将它转移到reactJs组件时，其中一个js脚本停止工作了。

这是组件。正如您所看到的，上面还有另一个来自同一materialize.min.js的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)

- stkvtflw

---

看起来 jQuery 插件丢失了。但这可能意味着您正在使用错误版本的插件，或者它在抛出 TypeError 之后才加载。 - David Knipe

如果React导入了不同的版本会怎么样呢？（只是随便想想，我不知道React和Materializecss是什么，也不知道你是如何管理JavaScript模块的。） - David Knipe

不，jQuery是通过 index.html 全局添加的 <script src: >，没有 jqury node_modules。 - stkvtflw

我不是指jQuery本身，我说的是jQuery插件：你是如何加载它的？ReactJS是否也在尝试加载它？ - David Knipe

@stkvtflw，你得到解决方案了吗？ - EdG

Answer 1

问题与文档准备在插件内部被调用有关。如果您正在使用React，则可能正在使用类似Browserify或Webpack的东西。在React中，您在componentDidMount函数中调用pushpin，但是pushpin尚未定义。

基本上你正在做以下事情：

• 定义jquery（如果使用require（jquery）语法，则现在已经触发了文档准备）
• 定义pushpin

在pushpin内部，它侦听已经触发的文档准备，因此它从未定义自己。

您可以通过删除pushpin插件中的两行来使其正常工作，第二行只是：

  $(document).ready(function() {

在第61行下方，删除闭合括号：

});

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

- user2415002

---

我在使用另一个插件ionRangeSlider时也遇到了相同的错误。我需要遵循同样的步骤吗？ - EdG

我的ionRangeSlider插件中没有$(document).ready(function() {。 - EdG