我的 React 版本有問題

Question

我對 React 了解不多，我必須測試一個用 React 制作的應用程序。

當我嘗試使用gulp nodemon運行服務器時，我的問題出現了，並且出現了很多錯誤。 顯然，該應用程序是基於舊版本的 React 構建的，並且無法識別某些庫或模塊； 我已經解決了其中幾個關於原型或 ReactClass 創建方式的問題，但我發現了一個關於 Bootstrap 的問題，但我無法解決。

這是我得到的錯誤：

bsStyle: _propTypes2['default'].oneOf(_styleMaps2['default'].STYLES),
                                ^
TypeError: Cannot read property 'oneOf' of undefined
    at Object.<anonymous> (/home/kevin/to_check/react-blog/node_modules/react-bootstrap/lib/BootstrapMixin.js:30:43)

這是我遇到問題的文件：

'use strict';

var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
exports.__esModule = true;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _styleMaps = require('./styleMaps');
var _styleMaps2 = _interopRequireDefault(_styleMaps);
var _propTypes2 = require('prop-types');
var _reactPropTypesLibKeyOf = require('react-prop-types/lib/keyOf');
var _reactPropTypesLibKeyOf2 = _interopRequireDefault(_reactPropTypesLibKeyOf);

var BootstrapMixin = {
  propTypes: {
    /**
     * bootstrap className
     * @private
     */
    bsClass: _reactPropTypesLibKeyOf2['default'](_styleMaps2['default'].CLASSES),
    /**
     * Style variants
     * @type {("default"|"primary"|"success"|"info"|"warning"|"danger"|"link")}
     */
    bsStyle: _propTypes2['default'].oneOf(_styleMaps2['default'].STYLES),
    /**
     * Size variants
     * @type {("xsmall"|"small"|"medium"|"large"|"xs"|"sm"|"md"|"lg")}
     */
    bsSize: _reactPropTypesLibKeyOf2['default'](_styleMaps2['default'].SIZES)
  },

  getBsClassSet: function getBsClassSet() {
    var classes = {};

    var bsClass = this.props.bsClass && _styleMaps2['default'].CLASSES[this.props.bsClass];
    if (bsClass) {
      classes[bsClass] = true;

      var prefix = bsClass + '-';

      var bsSize = this.props.bsSize && _styleMaps2['default'].SIZES[this.props.bsSize];
      if (bsSize) {
        classes[prefix + bsSize] = true;
      }

      if (this.props.bsStyle) {
        if (_styleMaps2['default'].STYLES.indexOf(this.props.bsStyle) >= 0) {
          classes[prefix + this.props.bsStyle] = true;
        } else {
          classes[this.props.bsStyle] = true;
        }
      }
    }

    return classes;
  },

  prefixClass: function prefixClass(subClass) {
    return _styleMaps2['default'].CLASSES[this.props.bsClass] + '-' + subClass;
  }
};

exports['default'] = BootstrapMixin;
module.exports = exports['default'];

這是應用程序具有的 package.json 文件：

{
  "name": "React-Isomorphic-Blog",
  "version": "1.0.0",
  "description": "React Isomorphic Blog",
  "author": "Jonathan Rossi <jonathan.m.rossi@gmail.com>",
  "license": "MIT",
  "dependencies": {
    "alt": "^0.14.5",
    "babel": "^4.7.16",
    "body-parser": "^1.12.3",
    "cookie-parser": "^1.3.4",
    "create-react-class": "^15.6.3",
    "express": "^4.12.3",
    "express-session": "^1.10.4",
    "iso": "^4.0.2",
    "jade": "^1.9.2",
    "marked": "^1.1.0",
    "moment": "^2.10.2",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-bootstrap": "^0.26.2",
    "react-ga": "^2.1.2",
    "react-prop-types": "^0.4.0",
    "react-router": "^3.2.6",
    "superagent": "^5.2.2"
  },
  "devDependencies": {
    "browserify": "^16.5.1",
    "gulp": "^4.0.2",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-nodemon": "^2.0.2",
    "gulp-print": "^2.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^4.1.0",
    "gulp-uglify": "^1.5.4",
    "nodemon": "^1.3.7",
    "reactify": "^1.1.0",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "paths": {
    "app": "./src/client.js"
  },
  "dest": {
    "app": "bundle.js",
    "dist": "public/scripts/react"
  },
  "main": "bin/www.js",
  "scripts": {
    "start": "node --use_strict bin/www.js"
  }
}

我希望你能幫助我解決這個問題，我真的找不到解決方案。 非常感謝。

Answer 1

自 React v15.5.0 以來，React.PropTypes 已被提取到它自己的 package 中。

從這個問題。 解決方法是改用prop-types package

// bsStyle: _react2['default'].PropTypes.oneOf(_styleMaps2['default'].STYLES), // not this
bsStyle: _propTypes2['default'].oneOf(_styleMaps2['default'].STYLES) // do this after installing prop-types