React登录表单开发报错：HelpBlock未从react-bootstrap导出

嘿，这个问题我碰到过！你遇到的Attempted import error: 'HelpBlock' is not exported from 'react-bootstrap'，是因为react-bootstrap在v4及以后的版本里，已经把HelpBlock组件废弃了，官方现在推荐用Form.Text来实现表单提示文本的功能。

问题根源 #

react-bootstrap的版本迭代后，将原有的HelpBlock组件功能整合到了Form.Text中，所以直接导入HelpBlock自然会找不到这个导出项。

具体解决方案 #

1. 更新导入语句

把原来导入HelpBlock的部分替换成Form.Text（或者直接导入FormText），示例如下：

import React, { Component } from "react";
// 方式一：导入Form，后续用Form.Text
import { Row, FormGroup, FormControl, Button, Form } from 'react-bootstrap';
// 方式二：直接导入FormText
// import { Row, FormGroup, FormControl, Button, FormText } from 'react-bootstrap';
import { isEmail, isEmpty, isLength, isContainWhiteSpace } from './validator';

2. 修改组件使用代码

将JSX中的<HelpBlock>替换成<Form.Text>，并且可以加上className="text-muted"来还原原HelpBlock的默认提示文本样式：

// 对应方式一的写法
{errors.email && <Form.Text className="text-muted">{errors.email}</Form.Text>}
// 对应方式二的写法
// {errors.email && <FormText className="text-muted">{errors.email}</FormText>}

3. 完整修改后的代码

import React, { Component } from "react";
import { Row, FormGroup, FormControl, Button, Form } from 'react-bootstrap';
import { isEmail, isEmpty, isLength, isContainWhiteSpace } from './validator';

class Login extends Component {
  render() {
    const { errors, formSubmitted } = this.state;
    return (
      <div className="Login">
        <Row>
          <form onSubmit={this.login}>
            <FormGroup controlId="email" validationState={ formSubmitted ? (errors.email ? 'error' : 'success') : null }>
              <FormControl type="text" name="email" placeholder="Enter your email" onChange={this.handleInputChange} />
              {errors.email && <Form.Text className="text-muted">{errors.email}</Form.Text>}
            </FormGroup>
          </form>
        </Row>
      </div>
    )
  }
}

export default Login;

额外提醒 #

如果你非要用旧版的HelpBlock，得确保你的react-bootstrap版本是v3或更早，但非常不推荐这么做——旧版本已经停止维护，会有兼容性和安全隐患，建议直接升级到新版本适配新组件写法。

内容的提问来源于stack exchange，提问作者dorra amri