每次我尝试使用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();