將PrimeUI組件包裝到React組件中

作爲概念驗證，我試圖使用PrimeUI作爲構建React組件的基礎。有一篇文章解釋如何去做 by Michael Guterl。它工作在JSFiddle 將PrimeUI組件包裝到React組件中

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沒有被拾取或以某種方式不被應用。很顯然，我在package.json中有jquery，jquery-ui和primeui依賴項。我也可以在捆綁的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" 
    } 
}

來源

2016-05-11 Mikhail Chibel

你會得到任何錯誤？ – QoP

構建時沒有錯誤，但是，正如我所說的，我有js異常「puidropdown不是函數」。檢查$（..）部分給出了適當的jquery對象。 –

雖然很多人努力做出的jQuery和jQuery UI的使用browserify時一起工作，在我的情況下，它實際上並沒有案子。在我們的設置中，我們有兩個捆綁的js文件vendor.js和app.js. vendor.js包含jquery，slick和es5-shim，而應用程序的所有js源代碼都被編譯到app.js文件中。通過在vendor.js文件中包含jquery-ui和primeui解決了這個問題，所以它們與jquery一起加載。

來源

2016-05-11 11:00:13

將PrimeUI組件包裝到React組件中

回答

相關問題