react-bootstrap 表单组件答案

【问题标题】：react-bootstrap Form componentreact-bootstrap 表单组件
【发布时间】：2016-08-18 01:26:42
【问题描述】：

我曾多次尝试使用<Form> 和<FormControl> 组件。每次我使用时，我都会遇到同样的错误：

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

“未捕获的不变违规：元素类型无效：预期为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。检查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>
    );
  }
}

有什么想法吗？

【问题讨论】：

你把 npm 包更新到最新版本了吗，我相信这些组件对于 react-bootstrap 来说是新的。
你指的是哪个版本？
请添加您的评论作为答案，以便关闭。
@JazzCat 请将您的评论添加为答案，以免问题显示为未回答。

标签： reactjs jsx react-bootstrap

【解决方案1】：

我遇到了一些相关的问题，发现他们删除了ControlLabel，在更新的版本中将其替换为FormLabel。

改变

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

到

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

【讨论】：

【解决方案2】：

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

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

这帮助我在使用 react-bootstrap 0.31 时摆脱了同样的错误。

【讨论】：

【解决方案3】：

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

【讨论】：