javascript - react Bootstrap : TypeError: Unable to get property 'bool' of undefined or null reference

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就像你面对的那样。
一位网友写道:

My problem is caused by npm link. I have 2 libs(A and B) which are both depends on react-bootstrap. B depends on v0.28.3, A depends on v0.29.0. And B depends on A through npm link. It's weird that codes of A will use the packages under B's node_modules. Anyway, update B's package.json to use v0.29.0 solve the issue.

无论如何，您的代码运行良好:

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"));

<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>