Question

我正在查看来自React-Bootstrap的组件，并且我试图测试其中一种形式：

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Form, FormGroup, Col, FormControl, Checkbox, ControlLabel, Button } from "react-bootstrap";

export default class LoginForm extends React.Component {
    render() {
        return (
            <div class="row content">
                <Form horizontal>
                    <FormGroup controlId="formHorizontalEmail">
                        <Col componentClass={ControlLabel} sm={2}>
                            Email
                  </Col>
                        <Col sm={10}>
                            <FormControl type="email" placeholder="Email" />
                        </Col>
                    </FormGroup>

                    <FormGroup controlId="formHorizontalPassword">
                        <Col componentClass={ControlLabel} sm={2}>
                            Password
                  </Col>
                        <Col sm={10}>
                            <FormControl type="password" placeholder="Password" />
                        </Col>
                    </FormGroup>

                    <FormGroup>
                        <Col smOffset={2} sm={10}>
                            <Checkbox>Remember me</Checkbox>
                        </Col>
                    </FormGroup>

                    <FormGroup>
                        <Col smOffset={2} sm={10}>
                            <Button type="submit">
                                Sign in
                    </Button>
                        </Col>
                    </FormGroup>
                </Form>
            </div>
        );
    }

}

一切似乎都没问题，除非我每次尝试使用react-bootstrap中的东西时都会遇到这个荒谬的错误：

TypeError: Unable to get property 'bool' of undefined or null reference
./node_modules/react-bootstrap/lib/PanelGroup.js
E:/Insanity/Web/segui_info/node_modules/react-bootstrap/lib/PanelGroup.js:25
  22 | 
  23 | var _utilsValidComponentChildren2 = _interopRequireDefault(_utilsValidComponentChildren);
  24 | 
> 25 | var PanelGroup = _react2['default'].createClass({
  26 |   displayName: 'PanelGroup',
  27 | 
  28 |   propTypes: {
View compiled
__webpack_require__
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:87
  84 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 |      hotCurrentParents = [];
  86 |  }
> 87 |  return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 |  return {
View compiled
./node_modules/react-bootstrap/lib/Accordion.js
E:/Insanity/Web/segui_info/node_modules/react-bootstrap/lib/Accordion.js:13
  10 | 
  11 | var _react2 = _interopRequireDefault(_react);
  12 | 
> 13 | var _PanelGroup = require('./PanelGroup');
  14 | 
  15 | var _PanelGroup2 = _interopRequireDefault(_PanelGroup);
  16 | 
View compiled
__webpack_require__
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:87
  84 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 |      hotCurrentParents = [];
  86 |  }
> 87 |  return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 |  return {
View compiled
./node_modules/react-bootstrap/lib/index.js
E:/Insanity/Web/segui_info/node_modules/react-bootstrap/lib/index.js:9
   6 | 
   7 | exports.__esModule = true;
   8 | 
>  9 | var _Accordion2 = require('./Accordion');
  10 | 
  11 | var _Accordion3 = _interopRequireDefault(_Accordion2);
  12 | 
View compiled
__webpack_require__
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:87
  84 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 |      hotCurrentParents = [];
  86 |  }
> 87 |  return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 |  return {
View compiled
./src/routes/admin.js
http://localhost:3000/static/js/bundle.js:96514:22
__webpack_require__
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:87
  84 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 |      hotCurrentParents = [];
  86 |  }
> 87 |  return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 |  return {
View compiled
./src/App.js
http://localhost:3000/static/js/bundle.js:95293:22
__webpack_require__
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:87
  84 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 |      hotCurrentParents = [];
  86 |  }
> 87 |  return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 |  return {
View compiled
./src/index.js
http://localhost:3000/static/js/bundle.js:96312:22
__webpack_require__
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:87
  84 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 |      hotCurrentParents = [];
  86 |  }
> 87 |  return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 |  return {
View compiled
0
http://localhost:3000/static/js/bundle.js:97408:1
__webpack_require__
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
Anonymous function
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:715
  712 | __webpack_require__.h = function() { return hotCurrentHash; };
  713 | 
  714 | // Load entry module and return exports
> 715 | return hotCreateRequire(0)(__webpack_require__.s = 0);
  716 | 
  717 | 
  718 | 
View compiled
Global code
http://localhost:3000/static/js/bundle.js:1:11

Answer 1

这不是一个完整的答案，只是演示了您的代码和建议。您的代码看起来很好（参见下面的示例）你面临着类似issue的问题一位人士写道：

我的问题是由npm链接引起的。我有2个库（A和B）两者都取决于react-bootstrap。 B取决于v0.28.3，A取决于 v0.29.0。 B取决于A到npm链接。它的代码很奇怪 A将使用B＆lt; node_modules下的软件包。无论如何，更新B＆＃39 package.json使用v0.29.0解决问题。

无论如何，这里的代码运行良好：

＆＃13;

const { Form, FormGroup, Col, FormControl, Checkbox, ControlLabel, Button } = ReactBootstrap;
class LoginForm extends React.Component {
  render() {
    return (
      <div class="row content">
        <Form horizontal>
          <FormGroup controlId="formHorizontalEmail">
            <Col componentClass={ControlLabel} sm={2}>
              Email
                  </Col>
            <Col sm={10}>
              <FormControl type="email" placeholder="Email" />
            </Col>
          </FormGroup>

          <FormGroup controlId="formHorizontalPassword">
            <Col componentClass={ControlLabel} sm={2}>
              Password
                  </Col>
            <Col sm={10}>
              <FormControl type="password" placeholder="Password" />
            </Col>
          </FormGroup>

          <FormGroup>
            <Col smOffset={2} sm={10}>
              <Checkbox>Remember me</Checkbox>
            </Col>
          </FormGroup>

          <FormGroup>
            <Col smOffset={2} sm={10}>
              <Button type="submit">
                Sign in
                    </Button>
            </Col>
          </FormGroup>
        </Form>
      </div>
    );
  }

}

ReactDOM.render(<LoginForm />, document.getElementById("root"));

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.3/react-bootstrap.min.js"></script>
<div id="root"></div>

＆＃13;

Answer 2

如果错误与proptype相关，那么您可能需要导入prop-types ..

    import React from 'react'; 
    import PropTypes from 'prop-types'

React-Bootstrap：TypeError：无法获取属性＆＃39; bool＆＃39;未定义或空引用

2 个答案: