PrimeUIコンポーネントをReactコンポーネントにラップする

Question

概念の証明として、Reactコンポーネントを構築するための基礎としてPrimeUIを使用しようとしています。それを行う方法を説明する記事があります by Michael Guterl。それはJSFiddle

var Component = React.createClass({ 
    componentDidMount: function() { 
    var themes = new Array('afterdark', 'afternoon'); 
    $(ReactDOM.findDOMNode(this)).puidropdown({ 
     data: themes, 
     editable: true 
    }); 
    }, 
    render: function() { 
    return <select/> 
    } 
}); 

ReactDOM.render(< Component/> , document.getElementById('container')); 

で動作しますが、私は内部のアプリケーションから動作させることができません。 「piudropdown - 関数ではありません」というエラーは、primeUIがピックアップされていないか、何らかの形で適用されていないことを示します。明らかに、私はjquery、jquery-uiとprimeui依存関係をpackage.jsonに持っています。私はバンドルされたjsファイルのprimeui関連のスタッフも見ることができるので、それが含まれています。誰も何が間違っているか不足している可能性があるアイディアを持っていますか？そのような問題をデバッグする方法はありますか？

JS

var React = require('react'); 
require('jquery'); 
require('jquery-ui'); 
require('primeui'); 
var ReactDOM = require('react-dom'); 

var MyComponent = React.createClass({ 
    componentDidMount: function() { 
     $(ReactDOM.findDOMNode(this)).puidropdown(); 
    }, 
    render: function() { 
     return (
      <select/> 
     ) 
    } 
}); 

module.exports = MyComponent; 

がpackage.json

{ 
    "name": "xxx-react", 
    "version": "0.0.1", 
    "description": "React UI for XXX", 
    "private": true, 
    "scripts": { 
    "start": "node start.js", 
    "test": "karma start karma.conf.js" 
    }, 
    "dependencies": { 
    "body-parser": "1.14.0", 
    "bower": "^1.4.1", 
    "browserify": "13.0.0", 
    "babelify": "7.2.0", 
    "del": "1.1.0", 
    "es5-shim": "4.0.5", 
    "eslint-plugin-react": "4.3.0", 
    "babel-eslint": "6.0.2", 
    "babel-preset-es2015": "6.6.0", 
    "babel-preset-react": "6.5.0", 
    "express": "4.10.6", 
    "extend": "3.0.0", 
    "gulp": "3.9.0", 
    "gulp-concat": "^2.4.2", 
    "gulp-connect": "2.3.1", 
    "gulp-cssmin": "^0.1.6", 
    "gulp-eslint": "^2.0.0", 
    "gulp-sass": "2.1.0", 
    "gulp-uglify": "^1.0.2", 
    "gulp-util": "^3.0.1", 
    "jasmine-core": "^2.3.4", 
    "jquery": "2.1.3", 
    "jquery-ui": "latest", 
    "karma": "0.13.22", 
    "karma-browserify": "5.0.3", 
    "karma-chrome-launcher": "0.2.3", 
    "karma-firefox-launcher": "0.1.7", 
    "karma-cli": "0.1.2", 
    "karma-jasmine": "0.3.6", 
    "karma-junit-reporter": "0.4.2", 
    "lodash": "4.11.0", 
    "moment": "2.9.0", 
    "react": "15.0.1", 
    "react-dom": "15.0.1", 
    "react-addons-test-utils": "15.0.1", 
    "react-bootstrap": "0.28.5", 
    "react-router-bootstrap": "0.22.0", 
    "react-bootstrap-daterangepicker": "0.2.3", 
    "react-router": "2.1.1", 
    "reflux": "0.4.1", 
    "vinyl-buffer": "1.0.0", 
    "vinyl-source-stream": "^1.0.0", 
    "watchify": "3.7.0", 
    "primeui" : "latest" 
    }, 
    "engines": { 
    "node": "0.10.x" 
    }, 
    "devDependencies": { 
    "eslint": "2.7.0" 
    } 
} 

Answer 1

コンポーネント多くの人々がbrowserify使用するとき一緒に動作するようにjqueryのとjQuery-UIを作るのに苦労しながら、私の場合には、それは実際にはなかったですケース。私たちのセットアップでは、バンドルされた2つのjsファイルvendor.jsとapp.jsがあります。 vendor.jsにはjquery、slick、es5-shimが含まれていますが、アプリケーションのすべてのjsソースはapp.jsファイルにコンパイルされています。この問題は、jquery-uiとprimeuiをvendor.jsファイルに含めることで解決され、jqueryと一緒にロードされました。