Question

作为概念证明，我正在尝试使用PrimeUI作为构建React组件的基础。有一篇文章解释了如何做到 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'));

但我无法从内部的React应用程序中使用它。我有'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"
  }
}

Answer 1

虽然很多人在使用browserify时很难让jquery和jquery-ui一起工作，但就我而言，实际情况并非如此。在我们的设置中，我们有两个捆绑的js文件vendor.js和app.js. vendor.js包括jquery，slick和es5-shim，而应用程序的所有js源都编译成app.js文件。通过将jquery-ui和primeui包含到vendor.js文件中解决了这个问题，所以它们与jquery一起加载。

将PrimeUI组件包装到React组件中

1 个答案: