尝试导入错误：'HelpBlock‘未从'react-bootstrap’中导出
问题：尝试导入错误：'HelpBlock‘未从'react-bootstrap’中导出
回答：这个错误是由于在尝试导入'react-bootstrap'库中的'HelpBlock'组件时出现了问题。'HelpBlock'是一个用于显示表单错误信息的组件，通常用于前端开发中的表单验证。
首先，我们需要确保已正确安装'react-bootstrap'库。可以通过以下命令使用npm进行安装：
npm install react-bootstrap接下来，在代码中正确导入'HelpBlock'组件。请确保在导入时使用正确的语法和路径。示例代码如下：
import { HelpBlock } from 'react-bootstrap';如果仍然出现导入错误，可能是由于版本不兼容或库中没有导出'HelpBlock'组件。在这种情况下，建议查阅'react-bootstrap'的官方文档或社区支持以获取更多信息。
关于'react-bootstrap'库的更多信息和使用示例，可以参考腾讯云的相关产品介绍链接地址：腾讯云React-Bootstrap产品介绍
同时，为了更好地理解和解决这个错误，建议熟悉前端开发中的React框架和Bootstrap库，以及它们在表单验证和错误处理方面的最佳实践。
相关·内容
每次我尝试使用来自'react-bootstrap‘的组件时，我都会遇到一些奇怪的错误。下面是我导入"HelpBlock“组件的一些小示例。 import PropTypes from 'prop-types';
import React from 'react';
import HelpBlock from 'react-bootstrap';
class RegisterFormDetails extends React.Component {
...
<HelpBlock>{va
浏览 36提问于2019-03-03得票数 0
我在react中创建了一个Login表单来检查登录参数，但是当我运行代码时，我抛出了这个异常： Attempted import error: 'HelpBlock' is not exported from 'react-bootstrap' import React, { Component } from "react";
import { Row, FormGroup, FormControl, Button, HelpBlock } from 'react-bootstrap';
import { isEmail, is
浏览 21提问于2020-12-09得票数 0
我是JavaScript和ReactJS的新手。
我想要什么
我想要创建一个具有以下布局的页面：
。
正如您所看到的，这两种表单都有一个边界。这就是我想要实现的(在注册表单中添加一个边框)。
我做了什么来获得的结果
我根据创建了一个简单的NodeJS/React应用程序。
然后，我定义了条目页面(包含这两种表单的页面)如下：
import React, { Component } from 'react';
import { Button, Row, Col, Jumbotron } from 'react-bootstrap';
import SignU
浏览 2提问于2017-07-27得票数 1
回答已采纳
我得到找不到模块:导入组件FormControl时无法解决react-bootstrap错误。
import { ControlLabel,
FormControl,
HelpBlock,
Form,
Col,
FormGroup,
Checkbox } from 'react-bootstrap'
浏览 0提问于2018-12-26得票数 1
我的目标是在多个组件中重用bootstrap中的模态。我有一个问题，如何将组件传递给容器？
<ModalContainer
title="Password recovery"
body="<LoginRecoverForm someprophere='' />"
/>
这会给出一个错误：
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for
浏览 12提问于2016-12-25得票数 2
回答已采纳
我使用的是React-Bootstrap版本的1.0.0-beta.10。
每当我想要使用一个组件时，例如Alert，我都会从集成开发环境中获得三个导入选项供选择：
"react-bootstrap"
"react-bootstrap/Alert"
"react-bootstrap/es/Alert"
我应该使用它们中的哪一个?为什么？
浏览 0提问于2019-08-08得票数 1
我正在开发ReactJS web应用，使用react-bootstrap设置样式，如下所示 import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col' 在每个
浏览 27提问于2019-09-23得票数 0
3回答
自举式组件
、、
我多次尝试使用<Form>和<FormControl>组件。每次我使用的时候我都会犯同样的错误：
Warning.js?8a56:45警告: React.createElement: type不应为空、未定义、布尔或数字。它应该是字符串(对于DOM元素)或ReactClass (用于复合组件)。请检查App的呈现方法。
“未定义不变冲突:元素类型无效:期望字符串(用于内置组件)或类/函数(用于组合组件)，但未定义。请检查App的呈现方法。”
即使有了这个基本的例子：
import React, {Component} from 'react';
浏览 5提问于2016-04-24得票数 13
我提交了一个返回错误数组的表单，但我在弄清楚如何让每个错误出现在正确的输入字段下面时遇到了麻烦。现在，所有错误都打印在每个输入字段下。我使用的是react-bootstrap。任何帮助都将不胜感激。
getValidationState() {
var errors = this.state.errors;
if (!$.isEmptyObject(errors))
{
errors.forEach(function(error) {
console.log("error:", error.name);
});
}
}
render
浏览 0提问于2017-05-12得票数 3
回答已采纳
2回答
我正在尝试实现react-bootstrap提供的导航栏组件。但是我得到了一个奇怪的错误。下面是堆栈跟踪的屏幕截图。
这是我的导航栏代码。
import React from "react";
import {Navbar, Nav, NavItem} from "react-bootstrap";
import navigationbarlogo from "../assets/images/navigationbarlogo.png"
import navstyle from "../assets/css/Navigatio
浏览 0提问于2019-01-23得票数 0
我用下面的代码在React中用Bootstrap和Redux定义了一个表单：
import React from 'react';
import { FormGroup, ControlLabel, FormControl, HelpBlock, Button } from 'react-bootstrap';
import { connect } from 'react-redux';
import './actions';
const _c = component => connect(s => s)(comp
浏览 0提问于2016-09-03得票数 1
我是Typescript新手，我正在尝试使用
案例1：import {Button} from 'react-bootstrap/lib/Button'
案例2：import * as Button from 'react-bootstrap/lib/Button'
这两种方法都不会在导入语句上抛出任何错误，而是在使用<Button bsClass="glyphicon glyphicon-new-window"></Button>呈现此按钮时抛出错误
在案例1中，没有编译时错误，只有Button is undefined
浏览 9提问于2017-04-13得票数 0
回答已采纳
这就是我的意思：
import BsssButtonGroup from "react-bootstrap/ButtonGroup";
它的工作方式与以下方法相同：
import ButtonGroup from "react-bootstrap/ButtonGroup";
..and我不明白为什么？
BsssButtonGroup不是React中ButtonGroup组件中现有或定义的组件，那么我如何能够导入它呢？究竟进口的是什么？写一些随意的名字是怎么回事？？我以为你必须进口导出的组件？但是BsssButtonGroup不是导出的，那么我怎么能够导入它呢？
浏览 3提问于2022-09-07得票数 0
未捕获TypeError:未定义react__WEBPACK_IMPORTED_MODULE___.React 至少到目前为止，更新webpack等并不能解决任何问题。 <anonymous> webpack:///./src/App.js?:18
js http://0.0.0.0:3100/app.bundle.js?d13ee6312591030d86a4:10747
__webpack_require__ http://0.0.0.0:3100/app.bundle.js?d13ee6312591030d86a4:790
fn http://0.0
浏览 8提问于2021-01-01得票数 1
回答已采纳
我正在尝试使用react-bootstrap。请参阅下面的代码。如果我加载单个模块(例如，按钮、ButtonGroup等)，它工作得很好。然而，我更愿意导入整个ReactBootstrap (就像下面的第2行)，但是它不能识别像这样的元素。我该怎么做呢？
import React from 'react';
import ReactBootstrap from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import { ButtonGroup } from
浏览 2提问于2016-08-20得票数 8
回答已采纳
2回答
我正在尝试创建一个基本的模式，直接从Bootstrap-React中提取，并得到一个导出错误。
我尝试过重构函数的初始化和导出，但仍然什么也没有。
import React from "react"
import Modal from "react-bootstrap/Modal"
import Button from "react-bootstrap/Button"
import useState from "react"
function Example() {
const [show, setShow] = useSt
浏览 1提问于2019-08-14得票数 1
回答已采纳
1回答
错误指向getValidationState()和()，但我没有找到源代码。我正在尝试创建一个输入，其验证状态取决于用户指定的输入长度而改变。
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import { FormGroup, ControlLabel, FormControl, HelpBlock } from 'r
浏览 2提问于2017-05-11得票数 0
回答已采纳
我使用的是版本6.4.3，并且我正在尝试验证两个日期字段，以便“to”日期必须始终在“from”日期之前。
其他示例说我应该能够在props中引用fields数组，但是没有这样的数组。但是，form state有一个名为registeredFields的数组，但这些数组的格式似乎是{name: 'dob', type: 'Field'}
这是我的表单代码
import React from 'react'
import DatePicker from 'react-bootstrap-date-picker'
impor
浏览 3提问于2017-01-18得票数 1
回答已采纳
我在尝试更改导航栏的颜色时遇到问题。我遗漏了什么步骤吗？
这是我试图呈现的组件：
import React from 'react';
import { Nav, Navbar } from 'react-bootstrap';
import styles from './MainMenu.module.css';
const Topbar = () => {
return(
<Navbar className={styles.mainBar}>
<Navbar.Brand&g
浏览 8提问于2021-06-04得票数 1
我是新的React，我只想用React引导实现多个输入的表单验证，我不知道如何做到这一点。
import React,{Component} from 'react';
import {FormControl,FormGroup,ControlLabel,HelpBlock} from 'react-bootstrap'
class SignUp extends Component{
getValidationState = () => {
console.log('Am I called');
c
浏览 2提问于2017-10-28得票数 1
回答已采纳
这是我的Home.js，我有两个按钮-“制造者”和“设计师”。
import React, { Component } from 'react';
import Designer from './Designer';
import Maker from './Maker';
import Jumbotron from 'react-bootstrap/Jumbotron';
import Container from 'react-bootstrap/Container';
import Row from '
浏览 5提问于2020-04-06得票数 0
回答已采纳
我正在尝试创建一个非常基本的react应用程序，我有一个文件名为'fakeMovieService.js‘。在movies.jsx中导入该文件，这些文件位于同一文件夹中。getmovies()中有一个函数，它基本上获取存储在一个变量中的电影的所有值，我正在尝试将其打印到在movies.jsx中创建的表中。
但是它显示了一个导入错误。fakemovieService中的代码：
const movies = [
{
_id: "5b21ca3eeb7f6fbccd471815",
title: "Terminato
浏览 0提问于2020-07-16得票数 0
编译时，我收到此错误:尝试导入错误：'userReducer‘未从'../features/user/userSlice’中导出。
我不知道为什么请帮助我！
在Header.js中导入
import { userReducer } from "../features/user/userSlice";
这是userSlice.js
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
name: "",
ema
浏览 1提问于2021-10-20得票数 1
import React from 'react';
import { Toast } from 'react-bootstrap';
export function Confirmation({ toggle }) {
return (
<Toast onClose={() => toggle(false)}>
<Toast.Header>
<strong className="mr-auto&#
浏览 2提问于2020-04-23得票数 0
例如，引入的推荐方法是这样做：
import Button from 'react-bootstrap/Button'而不是import { Button } from 'react-bootstrap';
原因是“这样做只吸引了您使用的特定组件，这可以显著减少最终发送到客户端的代码数量。”
来源：
React组件也是如此：
import Button from '@mui/material/Button';
来源：
我想在库中实现类似的东西，以限制包中代码的使用，但我不知道它们是如何实现这个特定模式的。我看过他们的代码库，但我不太明白。
浏览 10提问于2022-07-10得票数 0
我是js和react的新手，所以：
我尝试导出js函数：
App.js：
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { render } from 'react-dom';
import { LazyLog } from 'react-lazylog';
import 'bootstrap/dist/css/bootstrap.min.css';
import {
浏览 14提问于2019-11-11得票数 0
回答已采纳
在关于Redux的几个教程之后，我刚刚开始尝试react，并且在控制台中得到了一个错误：
警告:不能给无状态函数组件参考(参见Login创建的FieldGroup中的参考“用户名”)。访问此引用的尝试将失败。
将表单字段输入值传递给我的提交按钮的正确方法是什么？这些值应该进入redux商店吗？在阅读了docs：之后，在这种情况下，我似乎应该避免引用。因此，如果没有参考资料，我如何将输入值输入到submit按钮？谢谢你的帮助。
Login.jsx
import React, {Component, PropTypes} from 'react';
import {Row,
浏览 0提问于2017-10-13得票数 1
回答已采纳
3回答
我正在尝试将一个简单的组件导入到我的React中。我很难找到这个部件。
导入组件时，我得到了以下错误
./src/App.js 61:28-32 './componentes/Menu‘不包含名为“Menu”的导出。
这是我的简单组件：
import React, { Component } from 'react';
import { Button } from 'react-bootstrap';
export default class Menu extends Component {
render() {
r
浏览 0提问于2018-04-10得票数 5
回答已采纳
3回答
我是新手，几天前就开始探索自助。但是，每当我试图从react导入什么东西时--引导，它就是抛出错误。
我已经试过重新安装react引导程序了。但这并不能解决问题。这些是我的进口品：
import React, { Component } from 'react';
import {Button} from 'react-bootstrap/Button'; <-- culprit
import logo from './logo.svg';
import './App.css';
import Chart from '
浏览 0提问于2019-08-16得票数 1
回答已采纳
我一直在使用react-bootstrap，到目前为止，除了Card组件之外，大多数组件都可以正常工作，这是我得到的错误：
尝试导入错误：'Card‘不是从'react-bootstrap’导出的。
import React, {Component} from "react"
import {Button} from 'react-bootstrap'
import Card from "react-bootstrap/Card";
export default class NewsCard extends Componen
浏览 1提问于2019-02-15得票数 1
1回答
尝试导入错误：“未从
、、、、
我不能解决我的问题。我有一个文件，在这个文件中，我用lama.d.ts中的以下代码声明了一个类
export declare class lama {
// code here
}
然后，我将它导入到另一个文件中，该文件位于react项目的同一个文件夹中。
import { lama} from './lama.d';
但我有以下错误:试图导入错误：“喇嘛”不是从'./lama.d‘导出的。
它在.ts而不是.d.ts文件中也是这样做的。最奇怪的是，如果我从这个文件( lama.d.ts )导出另一个类(从另一个文件导入到lama.d.ts)，它可以工作，
浏览 6提问于2021-12-14得票数 2
当我尝试使用react bootstrap的示例代码时，我一直会收到错误，例如“Parameter”隐式具有'any‘类型；“属性'value’在‘Readonly<{}>’类型上不存在。”
在form.tsx中：
class FormExample extends React.Component {
constructor(props, context) {
super(props, context);
this.handleChange = this.handleChange.bind(this);
this.state = {
浏览 1提问于2018-03-07得票数 39
回答已采纳
下面的代码给了我一个Uncaught Invariant Violation。我不知道为什么。它几乎完全复制自Bootstrap示例。
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of 'LoginForm'.
import React from
浏览 13提问于2016-09-01得票数 0
我的组件中一直有这个错误。每当以任何方式更改“已完成”状态时，都会发生错误。当状态发生变化时，问题的来源是getValidationState()。它并没有破坏我的应用程序，但是，我有兴趣知道我在这个组件中做错了什么，以及我如何为将来修复它。
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import { FormGroup,
浏览 1提问于2017-05-11得票数 0
回答已采纳
1回答
很抱歉出现了糟糕的缩进，但是为什么第四个不是关于组件呈现的。我尝试过各种方法，甚至尝试在单独的文件中编写组件，但结果是一样的。在App.js中，第三方组件是关于的，我已经在index.js中导出和导入了它，就像呈现良好的Rcomp1组件一样。
App.js
import React, { Component } from 'react';
import 'font-awesome/css/font-awesome.min.css';
import { ProgressBar } from 'react-bootstrap';
import
浏览 2提问于2018-02-27得票数 0
回答已采纳
1回答
我有一个导入reactBootstrap的组件：
import ReactBootstrap from 'react-bootstrap'
然后，我的组件中有一个函数，当用户单击按钮时会触发该函数：
onClickBtn : function() {
var Modal = ReactBootstrap.Modal;
return (
<Modal>
...
</Modal>
)
}
但是，我得到了错误：
未定义的TypeError :无法读取未定义属性的“模式”。
我在遵循react引导指南时遇到了麻烦
浏览 4提问于2015-12-23得票数 2
回答已采纳
2回答
我应该使用下列哪一项：
import { Button } from 'react-bootstrap';
或
import Button from 'react-bootstrap/Button';
前者具有为组件使用正确名称的优点，因此我不明白为什么要使用后一种方法来导入ES6。
浏览 3提问于2021-05-31得票数 0
回答已采纳
我为ListGroups使用的React-Bootstrap代码有一个名为"Sonnet“的组件，该组件可能尚未在React-Bootstrap中导出，因此我面临的”Sonnet“不能从”React-bootstrap“问题导出，即使我尝试手动导入它或使用"*”导入完整的React-bootstrap包。我还没有找到一个单独的帖子或博客，甚至列出了“十四行诗”的错误或任何事情。需要你们帮我理解一下！ 我的尝试是:从‘react-bootstrap’重新安装bootstrap/ import {Sonnet}；从‘react-bootstrap’作为ReactBootstrap
浏览 75提问于2019-05-06得票数 3
回答已采纳
1回答
以下是我的档案：
Pricing.js
import React, { Component } from 'react';
import { Table } from 'react-bootstrap';
class Pricing extends Component {
render() {
return (
<Table striped bordered condensed>
<thead>
<th></
浏览 0提问于2018-01-20得票数 1
回答已采纳
1回答
我真的在努力理解如何使用React + TS正确地进行单元测试，但是到目前为止，这真的很难。我有两个非常简单的组件，用来隔离事物。我会包括在底部的组件，这样我就不会把东西弄得太乱。
非常简单，单击Button，状态变量data中的“hello”到“world”的更改将显示在InnerComponent中。，模式是测试文档中的副作用，而不是尝试测试状态更改本身(谢天谢地，我在试图使用类型记录访问包装实例中的状态时做了一个噩梦)。然而，eslint讨厌screen，TS无法找到findByText。相反，在下面的测试中，我得到了注意到的行上的错误Property 'findByText&#
浏览 4提问于2022-01-05得票数 2
回答已采纳
我正在使用Redux和React Native来管理状态。我相信我已经成功地设置了商店和提供者。我可以从任何组件成功地使用store.getState()和store.dispatch(action())，但是，react-redux connect函数不允许我从子组件访问存储区。你能在下面的代码中发现任何错误吗？ Login.js -我正在测试的这个子组件不会通过react-redux connect访问redux store。 import React, {Component} from 'react';
import actions from '../../re
浏览 14提问于2020-01-05得票数 0
回答已采纳
我在React JS中一直收到这个错误。我从来没有收到过这个错误，而且我在互联网上也找不到任何东西。我安装了react-spring。我把它导入App.js了。 尝试导入错误：'animated‘不是从'react-spring’导出的。 import { useSpring, animated } from "react-spring"; 我已经使用: npm install react-spring安装了react-spring
浏览 20提问于2021-04-26得票数 0
回答已采纳
我不知道为什么会有这个错误，我试着在网上搜索，我看到了一些我尝试过的建议，但是错误并不清楚。请有人知道我做错了什么吗？这是我的代码：
import React from 'react';
import { BrowseRouter as Router, Route } from 'react-router-dom';
import Join from './components/Join';
import Chat from './components/Chat';
const App = () => (
&l
浏览 3提问于2020-09-10得票数 4
回答已采纳
我正在实现选择页面，用户可以单击Button 1或2。一旦单击按钮，用户将被重定向到相应的页面。为了测试的简单性，我只在所有选择中使用SelectionPage。
问题是我得到了错误：
Failed to compile
./src/App.js
Attempted import error: 'SelectionPage' is not exported from './components/SelectionPage'.
我不清楚为什么SelectionPage不能导出，如果我导出它(见下文)。
App.js的代码
import React, { Comp
浏览 3提问于2020-06-17得票数 2
回答已采纳
我正在尝试构建一个下拉菜单，因此我同时导入了DropdownButton和MenuItem。
import { DropdownButton } from 'react-bootstrap';
import { MenuItem } from 'react-bootstrap';
但是，我看到以下错误：
error 'react-bootstrap' import is duplicated no-duplicate-imports
如何从react-bootstrap导入这两个组件？
浏览 0提问于2017-06-01得票数 4
我正在尝试从子组件表单<Form handler = {this.handler} />更新我的状态。但当我按回车键时，当前状态值为null。我认为问题出在我的处理程序(E)函数中，但我不知道是什么原因。
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Form from './Form.js';
import { Button } from 'react-
浏览 37提问于2018-06-06得票数 0
我刚刚开始在我的站点中实现React-Bootstrap，但是单击它时NavDropdown组件不会展开。
我做了什么：npm install -s react-bootstrap
添加css到html：<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
已创建我的Navigation组件：
import React from 'react';
import PropTypes fro
浏览 1提问于2017-11-19得票数 10
我正在使用babel和webpack来处理React和ES6。我想在不同的文件中构建几个组件，导入到一个文件中，并将它们与webpack捆绑在一起
假设我有几个这样的组件：
my-navbar.jsx
import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
export class MyNavbar extends React.Component {
render(){
return (
<Navbar className=
浏览 31提问于2015-11-27得票数 147
回答已采纳
我使用Gatsby框架构建了一个静态站点，并尝试使用Netlify部署它。Netlify似乎一开始就部署一切正常，并运行gatsby build命令。但是，我总是遇到这样的错误： 12:36:51 PM: failed Building production JavaScript and CSS bundles - 33.697s
12:36:51 PM: error Generating JavaScript bundles failed
12:36:51 PM: Can't resolve 'react-bootstrap/NavBar' in '/opt
浏览 15提问于2020-08-30得票数 0
我试图将库中的所有内容作为散列导入，对其进行修改，然后重新导出修改后的散列，而不知道库中所有已命名的导出。例如：
import * as reactBootstrap from 'react-bootstrap';
wrappedReactBootstrap = doFunnyThingsTo(reactBootstrap);
export {
...wrappedReactBootstrap
};
// or
export wrappedReactBootstrap;
我对的理解是，规范不允许以下内容。有人能确认一下吗？
显然，循环是不可能的，因为导出和导入语句必须
浏览 2提问于2017-04-09得票数 26
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
