Question

每次我尝试使用react-bootstrap中的内容时，都会出现此错误。 “元素类型无效：预期使用字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义的文件中导出组件，或者混合使用了并命名为默认导入。”我的导出文件用于App.js，并且已导入index.js中，所以我看不出问题所在。如果我在app.js中删除import Nav语句并取出nav.link标记，则运行良好。

App.js

import React, { Component } from 'react';
import './App.css';
import { Nav } from 'react-bootstrap';

class App extends Component {
render() {
return (
<div className="App">
 <div class="container">
    <nav class="navbar navbar-inverse navbar-fixed-top">
       <div class="container-fluid">
          <div class="navbar-header">
             <a class="navbar-brand" href="#">WebSiteName</a>
          </div>
          <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
          </ul>
       </div>
    </nav>
 </div>
 <div className="container"> //if I remove this container and the third import statement, it renders with no issues.
    <Nav defaultActiveKey="/home" className="flex-column">
       <Nav.Link href="/home">Active</Nav.Link>
       <Nav.Link eventKey="link-1">Link</Nav.Link>
       <Nav.Link eventKey="link-2">Link</Nav.Link>
    </Nav>;
 </div>
</div>
);
}
}

export default App;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

元素类型无效：需要一个字符串，请检查App的render方法

0 个答案: