$（...）。pushpin不是函數 - reactJs，Materializecss

Question

我用jquery和materializecss編寫了這個頁面。 所有js都運作良好。 但是一旦我將它轉移到reactJs組件，其中一個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)

Answer 1

問題與在實際插件中調用文檔就緒有關。 如果你正在使用react，那么你可能正在使用像browserify或webpack這樣的東西。 在反應中，您在componentDidMount函數中調用了pushpin，但是pushpin沒有自己定義。

基本上你正在做的是：

• 定義jquery（如果你使用require（jquery）語法，現在就會觸發文檔就緒）
• 定義圖釘

在圖釘內部，它會監聽已經觸發的文檔，因此它從不定義自己。

您可以通過刪除圖釘插件內的兩行來使其工作，第二行只是：

  $(document).ready(function() {

然后在第61行上，刪除右括號：

});

現在，當您需要圖釘庫（或者像materializecss那樣需要它的其他東西）時，將立即定義圖釘函數，並且不會拋出有關未定義函數的錯誤。