0

作为概念证明，我尝试使用PrimeUI作为构建 React 组件的基础。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;

包.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"
  }
}
4

1 回答 1

0

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

于 2016-05-11T11:00:13.580 回答