импорт функционального компонента и получение типа элемента недопустим - PullRequest
Новая
       49

импорт функционального компонента и получение типа элемента недопустим

2 голосов
/ 13 июля 2020

Я пытаюсь создать простое приложение и просто получить быстрый макет для рендеринга с помощью React Bootstrap и React Router.

Мой индекс (который должен отображаться) приложение выглядит так. 

import {render} from "react-dom";
import './index.css';
import App from './App.js';
import {BrowserRouter as Router}  from "react-router-dom";

render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

И приложение (которое выдает ошибку, поскольку удаление <App /> отображает пустую страницу) выглядит так: 

import { Link } from 'react-router-dom';
import { Nav, Navbar, NavItem } from "react-bootstrap";
import './App.css';
import Routes from './Routes';

export default function App() {
    return (
      <div className="App container">
        <Navbar fluid collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to="/">Home</Link>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
        </Navbar>
        <Routes />
      </div>
    );
}

Однако я получаю эту ошибку: Ошибка: неверный тип элемента. Ожидаемая строка не определена

Я попытался изменить ее на компонент расширения класса и настроить способ экспорта в компонент приложения, но застрял на этом.

Ответы [ 3 ]

0 голосов
/ 13 июля 2020

Я думаю, что компонент приложения должен расширять класс React Component и импортировать React, чтобы он работал. Вы должны изменить приложение. js как 

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Nav, Navbar, NavItem } from "react-bootstrap";
import './App.css';
import Routes from './Routes';

export default class App extends Component {
  render() {
    return (
      <div className="App container">
        <Navbar fluid collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to="/">Home</Link>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
        </Navbar>
        <Routes />
      </div>
    );
  }
}

Для получения подробной информации проверьте аналогичный SO Вопрос

0 голосов
/ 13 июля 2020

Сохраняйте REACT в рамках вашего Компонента индекса. import React from 'react. Также, как упоминалось выше, компонент вашего приложения должен расширять компонент React import React, { Component } from 'react';

0 голосов
/ 13 июля 2020

Думаю, это означает, что один из используемых вами компонентов на самом деле не существует. Моя ставка была бы на Navbar.Header, поскольку я не мог найти его в документации.

Dropdown.Header - это вещь, хотя

...