React-Bootstrap表单组件

Question

我尝试过多次使用 <Form> 和 <FormControl> 组件。每次使用时，都会出现相同的错误：

"warning.js?8a56:45 警告：React.createElement：类型不应为null、undefined、布尔值或数字。它应该是一个字符串（对于DOM元素）或ReactClass（对于复合组件）。检查 App 的渲染方法。"

"Uncaught Invariant Violation: 元素类型无效：期望一个字符串（用于内置组件），或者一个类/函数（用于复合组件），但得到了undefined。请检查 App 的渲染方法。"

即使是这个基本示例也是如此:

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

有什么想法吗？

- user1399063

---

你是否已将npm包更新到最新版本？我相信这些组件是React-Bootstrap的新版本。 - JazzCat

你指的是哪个版本？ - caffeinescript

请将您的评论作为答案添加，以便关闭。 - Guilherme Rodrigues

@JazzCat请将您的评论添加为答案，以便问题不会显示为未回答。 - Christopher Chiche

Answer 1

更新npm包，这些组件是react-bootstrap中的新组件。

- JazzCat

Answer 2

我曾经遇到过类似的问题，后来发现在较新的版本中，他们将ControlLabel移除并用FormLabel代替了。

更改

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

至

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

- Ninjaxor

Answer 3

像这样导入你的React-Bootstrap组件：

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

这帮助我解决了在使用react-bootstrap 0.31时出现的相同错误。

- Mirko Flyktman