Reactjs '；ControlLabel'；不是从'；react引导&x27；

您好，我正在react中创建一个登录表单，要检查登录参数，请使用软件包的Checkbel，但当我运行代码时，会引发此异常：/src/App.js尝试导入错误：“ControlLabel”不是从“react bootstrap”导出的。如何解决

反应代码：

import React, { Component } from "react";
import { Form,Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import "./Login.css";
import Bootstrap from "react-bootstrap";

export default class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: "",
      password: ""
    };
  }

  validateForm() {
    return this.state.email.length > 0 && this.state.password.length > 0;
  }

  handleChange = event => {
    this.setState({
      [event.target.id]: event.target.value
    });
  }

  handleSubmit = event => {
    event.preventDefault();
  }

  render() {
    return (
      <div className="Login">
        <form onSubmit={this.handleSubmit}>
          <FormGroup controlId="email" bsSize="large">
            <ControlLabel>Email</ControlLabel>
            <FormControl
              autoFocus
              type="email"
              value={this.state.email}
              onChange={this.handleChange}
            />
          </FormGroup>
          <FormGroup controlId="password" bsSize="large">
            <ControlLabel>Password</ControlLabel>
            <FormControl
              value={this.state.password}
              onChange={this.handleChange}
              type="password"
            />
          </FormGroup>
          <Button
            block
            bsSize="large"
            disabled={!this.validateForm()}
            type="submit"
          >
            Login
          </Button>
        </form>
      </div>
    );
  }
}

import React，{Component}来自“React”；
从“react bootstrap”导入{Form，Button，FormGroup，FormControl，ControlLabel}；
导入“/Login.css”；
从“react Bootstrap”导入引导；
导出默认类登录扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电邮：“，
密码：“
};
}
validateForm（）{
返回this.state.email.length>0&&this.state.password.length>0；
}
handleChange=事件=>{
这是我的国家({
[event.target.id]：event.target.value
});
}
handleSubmit=事件=>{
event.preventDefault（）；
}
render（）{
返回(
电子邮件
密码
登录
);
}
}

根据此url和您的版本，您应该这样修改代码

    import React, { Component } from "react";
    import Form from 'react-bootstrap/Form'
    import Button from 'react-bootstrap/Button'
    import Bootstrap from "react-bootstrap";

    export default class Login extends Component {
      constructor(props) {
        super(props);

        this.state = {
          email: "",
          password: ""
        };
      }

      validateForm() {
        return this.state.email.length > 0 && this.state.password.length > 0;
      }

      handleChange = event => {
        this.setState({
          [event.target.id]: event.target.value
        });
      }

      handleSubmit = event => {
        event.preventDefault();
      }

      render() {
        return (
          <div className="Login">
            <Form onSubmit={this.handleSubmit}>
              <Form.Group controlId="email" bsSize="large">
                <Form.Control
                  autoFocus
                  type="email"
                  value={this.state.email}
                  onChange={this.handleChange}
                />
              </Form.Group>
              <Form.Group controlId="password" bsSize="large">
                <Form.Control
                  value={this.state.password}
                  onChange={this.handleChange}
                  type="password"
                />
              </Form.Group>
              <Button
                block
                bsSize="large"
                disabled={!this.validateForm()}
                type="submit"
              >
                Login
              </Button>
            </Form>
          </div>
        );
      }
    }

import React，{Component}来自“React”；
从“react引导/表单”导入表单
从“反应引导/按钮”导入按钮
从“react Bootstrap”导入引导；
导出默认类登录扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电邮：“，
密码：“
};
}
validateForm（）{
返回this.state.email.length>0&&this.state.password.length>0；
}
handleChange=事件=>{
这是我的国家({
[event.target.id]：event.target.value
});
}
handleSubmit=事件=>{
event.preventDefault（）；
}
render（）{
返回(
登录
);
}
}

尝试使用FormLabel而不是ControlLabel

此

“react bootstrap”：“^1.0.0-beta.16”

不包含ControlLabel，因此 使用卸载它

   npm uninstall react-bootstrap

然后使用此

“react bootstrap”重新安装“^0.32.4”

版本

   npm install react-bootstrap@0.32.4 --save

---

肯定会解决此问题

来自旧版本的react引导。当前版本（“react引导”：“^1.4.3”）使用的react引导的版本是什么，这些组件在0.28中不存在。@Kunal我的版本是：1.0.0-beta.5Try

FormLabel

而不是“ControlLabel”--这是react bootstrap最新版本的新名称。@mtyson您的评论可能是一个可接受的答案。接受的答案对我不起作用。那么，您必须从package.json中删除^1，以便在部署时安装最新版本。这是最好的方法！