react-bootstrap 表单组件

Posted 2023-02-21

【中文标题】react-bootstrap 表单组件

【英文标题】：react-bootstrap Form component

【发布时间】：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 请将您的评论添加为答案，以免问题显示为未回答。

【参考方案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 中的新组件。