react-bootstrap 表单组件

Question

I have tried several times to use the <Form> and <FormControl> components. Everytime I use I keep getting same erros:

"warning.js?8a56:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of App ."

"Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of App ."

Even with this basic example:

import React, {Component} from 'react';
import {FormControl, FormGroup, ControlLabel, HelpBlock, Checkbox, Radio, Button} from 'react-bootstrap';

export default class App extends Component {
  render() {
    return (
      <form>
        <FormGroup controlId="formControlsText">
          <ControlLabel>Text</ControlLabel>
          <FormControl type="text" placeholder="Enter text" />
        </FormGroup>

        <Button type="submit">
          Submit
        </Button>
      </form>
    );
  }
}

Any ideas?

Answer 1

更新 npm-package 这些组件在 react-bootstrap 中是新的。

Answer 2

Import your React-Bootstrap components like this:

import FormControl from 'react-bootstrap/lib/FormControl';

That helped me to get rid of the same error when using react-bootstrap 0.31.

Answer 3

I had a somewhat related issue and discovered they removed ControlLabel replacing it with FormLabel in more recent versions.

Change

import {FormControl, FormGroup, ControlLabel, etc... } from 'react-bootstrap';

To

import {FormControl, FormGroup, FormLabel, etc... } from 'react-bootstrap';