[英]Default export error even after exporting the component in ReactJS
我正在尝试通过参考他们的文档来使用 react-bootstrap 创建一个导航栏。
我创建了一个我将导入的 NavigationBar.js 组件文件。
import React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import PropTypes from 'prop-types';
const NavigationBar = props => {
const { link, brand } = props;
return (
<Navbar bg="light" sticky="top">
<Navbar.brand href={link}>{brand}</Navbar.brand>
</Navbar>
);
};
NavigationBar.propTypes = {
brand: PropTypes.string.isRequired,
link: PropTypes.string.isRequired,
};
export default NavigationBar;
还有我的 App.js(我在其中导入组件):
import React from 'react';
import './App.css';
import NavigationBar from './components/NavigationBar';
function App() {
return (
<div>
<NavigationBar brand="xyz" link="#home" />
</div>
);
}
export default App;
代码编译正常,但在浏览器中抛出错误,如下所示:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `NavigationBar`.
可以做些什么来解决这个错误?
我相信错误来自这条线
<Navbar.brand href={link}>{brand}</Navbar.brand>
react中的组件名称必须以大写字母开头。 这意味着 Navbar.brand 应该是 Navbar.Brand
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.