时间戳

首页 > 解决方案 > 即使在 ReactJS 中导出组件后，默认导出错误

javascript - 即使在 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`.

可以做些什么来解决这个错误？

标签： javascriptreactjsreact-bootstrap

解决方案

我相信错误来自这条线

      <Navbar.brand href={link}>{brand}</Navbar.brand>

react中的组件名称必须以大写字母开头。这意味着 Navbar.brand 应该是 Navbar.Brand

推荐阅读