Question

我正在尝试创建一个简单的应用程序，并获得一个快速的模型以使用一些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>
    );
}

但是我遇到此错误：Error: Element type is invalid. Expected string got undefined

我曾尝试将其更改为扩展类组件，并调整了如何导出App组件，但仍停留在此组件上。

Answer 1

我认为这意味着您使用的组件之一实际上并不存在。我的赌注应该是Navbar.Header，因为我在文档中找不到它。

.NET core 3.0 and MS Office Interop确实是

Answer 2

我认为App组件应该扩展React Component类并导入React使其起作用。您必须将App.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 Question

Answer 3

在索引组件的范围内保持REACT。 import React from 'react。同样如上所述，您的App组件应扩展React组件 import React, { Component } from 'react';

导入功能组件并获取元素类型无效

3 个答案: