0

概念実証として、React コンポーネントを構築するための基礎としてPrimeUIを使用しようとしています。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 - is not a function」というエラーは、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 を連携させるのに苦労していますが、私の場合は実際にはそうではありませんでした。このセットアップでは、vendor.js と app.js の 2 つのバンドルされた js ファイルがあります。vendor.js には jquery、slick、es5-shim が含まれ、アプリケーションのすべての js ソースは app.js ファイルにコンパイルされます。この問題は、jquery-ui と primeui を vendor.js ファイルに含めることで解決されたため、jquery と一緒に読み込まれました。

于 2016-05-11T11:00:13.580 に答える