2016-08-18 4 views
0

私はclassie.jsというクラスのヘルパー関数を持っている:index.html <head/>クラスヘルパー関数をReactJSコンポーネントに含める場所は?

(function(window) { 

'use strict'; 

function classReg(className) { 
    return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 
} 

var hasClass, addClass, removeClass; 

if ('classList' in document.documentElement) { 
    hasClass = function(elem, c) { 
    return elem.classList.contains(c); 
    }; 
    addClass = function(elem, c) { 
    elem.classList.add(c); 
    }; 
    removeClass = function(elem, c) { 
    elem.classList.remove(c); 
    }; 
} 
else { 
    hasClass = function(elem, c) { 
    return classReg(c).test(elem.className); 
    }; 
    addClass = function(elem, c) { 
    if (!hasClass(elem, c)) { 
     elem.className = elem.className + ' ' + c; 
    } 
    }; 
    removeClass = function(elem, c) { 
    elem.className = elem.className.replace(classReg(c), ' '); 
    }; 
} 

function toggleClass(elem, c) { 
    var fn = hasClass(elem, c) ? removeClass : addClass; 
    fn(elem, c); 
} 

var classie = { 
    // full names 
    hasClass: hasClass, 
    addClass: addClass, 
    removeClass: removeClass, 
    toggleClass: toggleClass, 
    // short names 
    has: hasClass, 
    add: addClass, 
    remove: removeClass, 
    toggle: toggleClass 
}; 

// transport 
if (typeof define === 'function' && define.amd) { 
    // AMD 
    define(classie); 
} else { 
    // browser global 
    window.classie = classie; 
} 

})(window); 

そしてindex.html<head/>で次の操作を行います。どこで、どのようにすべき、Reduxの、WebPACKので

<script src="classie.js"></script> 
<script> 
    function init() { 
     window.addEventListener('scroll', function(e){ 
      var distanceY = window.pageYOffset || document.documentElement.scrollTop, 
       shrinkOn = 300, 
       header = document.querySelector("header"); 
      if (distanceY > shrinkOn) { 
       classie.add(header,"smaller"); 
      } else { 
       if (classie.has(header,"smaller")) { 
        classie.remove(header,"smaller"); 
       } 
      } 
     }); 
    } 
    window.onload = init(); 
</script> 

をルーター、ReactJSプロジェクトに反応これらはコンポーネントに含まれますか?

答えて

0

コンポーネントがレンダリングされるindex.htmlにclassie.jsを含める必要があります。あなたは、私はそれはそれは私が用意 `index.htmlを`に示されているかのように機能するために取得したいと思い

declare function some_function(some_params); 
+0

としてコンポーネントに(classie.jsから)関数を宣言することができますか?また、私のindex.htmlに 'classie.js'をインクルードすることによって、この' '宣言を残しておきます。 –

関連する問題