Неверный тип элемента при импорте пользовательского компонента React - PullRequest
Новая
       21

Неверный тип элемента при импорте пользовательского компонента React

0 голосов
/ 31 мая 2019

Я пытаюсь отобразить пользовательскую навигационную панель в своем приложении React, и у меня появляется ошибка неверного типа.

Мне известно, что в React есть именованные импорты и экспорты по умолчанию, однако я экспортирую класс CustomNavBar по умолчанию и импортирую его по умолчанию в App.jsx. Другие авторы упоминали, что это может быть проблемой с версиями пакета, но я не знаю, с чего начать это исправлять.

App.jsx: 

import Button from 'react-bootstrap/Button';
import { BrowserRouter as Router, Route} from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Resume from './components/Resume';
import CustomNavBar from './components/CustomNavBar';
import './App.css';

function App() {
  return (
    <div className="App">
      <Router>
        <div>
          <CustomNavBar />
          <Route exact path = "/" component={Home} />
          <Route path = "/about" component={About} />
          <Route path = "/resume" component={Resume} />
        </div>
      </Router>

    </div>
  );
}

export default App;

Код выполняется как обычно, когда компонент CustomNavBar пропущен.

CustomNavBar.jsx: 1010 * * 

import React, { Component } from 'react'  
import { Navbar, Nav, NavItem } from 'react-bootstrap';
import { Link } from 'react-router-dom';


export default class CustomNavBar extends Component {
    render() {
        return (
            <Navbar default collapseOnSelect>
                <Navbar.Header>
                    <Navbar.Brand>
                        <Link to="/">Home</Link>
                    </Navbar.Brand>
                    <Navbar.Toggle />
                </Navbar.Header>
                <Navbar.Collapse>
                    <Nav pullRight>
                        <NavItem eventKey={1} componentClass={Link} to="/">
                            Home
                        </NavItem>
                        <NavItem eventKey={2} componentClass={Link} to="/about">
                            About
                        </NavItem>
                        <NavItem eventKey={3} componentClass={Link} to="/resume">
                            Resume
                        </NavItem>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        );
    }
}

package.json: 

{
  "name": "my_site",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.3.1",
    "react": "^16.8.6",
    "react-bootstrap": "^1.0.0-beta.8",
    "react-dom": "^16.8.6",
    "react-router": "^5.0.0",
    "react-router-dom": "^4.4.0-beta.8",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Ошибка:

Тип элемента недопустим: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или вы смешали импорт по умолчанию и с именами.

Проверьте метод рендеринга CustomNavBar.

* 1 022 * / **** **** решаемые / Заголовок больше не экспортируется из начальной загрузки, бренд и переключатель не должны содержаться в div в начальной загрузке 4.

Ответы [ 2 ]

1 голос
/ 31 мая 2019

Похоже, что Navbar.Header был удален в v1:

Навбар удален Навбар. Заголовок удален Навбар. Для удаления жидкости используйте свой собственный компонент-контейнер.обратное удалено и заменено на вариант = "темные" позиционные реквизиты были объединены в фиксированные = {верх | низ} и липкие = {верх | низ}, staticTop был удален

1 голос
/ 31 мая 2019

Изучая документы по реакции-начальной загрузке, я не думаю, что она показывает Navbar.Header.Может ли это быть проблема?У меня такая же догадка для NavItem.Мне кажется, что это должно сказать Nav.Item.

...