我正在尝试为我的网络应用程序创建一个导航栏。当我打开 index.html
时,没有加载任何内容。当我在 firefox 中检查 Web 控制台时,出现以下错误:
太多的递归
如果我点击它,它会给我这个;
require<[357]</</ReactCompositeComponentMixin.getName() vendors.js:29036
getDeclarationErrorAddendum() vendors.js:33167
checkPropTypes() vendors.js:33322
validatePropTypes() vendors.js:33342
require<[385]</</ReactElementValidator.createElement() vendors.js:33376
render()
require<[357]</</ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext() vendors.js:28968
require<[357]</</ReactCompositeComponentMixin._renderValidatedComponent() vendors.js:28988
require<[404]</</ReactPerf.measure/wrapper() vendors.js:35387
require<[357]</</ReactCompositeComponentMixin.performInitialMount() vendors.js:28573
require<[357]</</ReactCompositeComponentMixin.mountComponent() vendors.js:28526
require<[404]</</ReactPerf.measure/wrapper() vendors.js:35387
require<[409]</</ReactReconciler.mountComponent() vendors.js:36055
require<[398]</</ReactMultiChild.Mixin.mountChildren() vendors.js:34750
此错误还有更多行,但我希望前几行有助于确定问题,如果需要更多,请告诉我。我也在 Chrome 上试过这个,它给我 Error: Maximum call stack size exceeded
。
如果有人想知道 vendor.js
和 bundle.js
是什么,它们是 gulp
一起构建我的 javascript 文件的结果。
我认为问题是由于某处的无限循环而发生的,但我没有使用任何东西,所以我认为问题源于我的 Nav.js
文件,我在该文件中创建了 导航栏
导航.js:
import React from 'react';
import { Navbar, NavItem, MenuItem, NavDropdown } from 'react-bootstrap';
export default class Nav extends React.Component {
constructor() {
super();
this.state = {};
}
render() {
const navbarInstance = (
<Navbar inverse defaultExpanded={true}>
<Navbar.Header>
<Navbar.Brand>
<a href="#">Songshare</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
<NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
<MenuItem eventKey={3.3}>Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.3}>Separated link</MenuItem>
</NavDropdown>
</Nav>
<Nav pullRight>
<NavItem eventKey={1} href="#">Link Right</NavItem>
<NavItem eventKey={2} href="#">Link Right</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
return (
<div>
{navbarInstance};
</div>
);
}
}
然后我像这样在我的 MainLayout.js
中导入该类;
import React from "react";
import Nav from "./layout/Nav";
export default class MainLayout extends React.Component {
render() {
return (
<div>
<Nav />
</div>
);
}
}
最后,我将 MainLayout.js
导入我的 app.js
import React from "react";
import ReactDOM from "react-dom";
import MainLayout from "./pages/components/MainLayout";
const app = document.getElementById('app');
ReactDOM.render(<MainLayout />, app);
因为我看到错误说了一些关于 checkPropTypes()
的事情,所以我尝试将这一行添加到末尾,但我仍然遇到同样的错误。我从 here 得到了这个想法
Nav.propTypes = { defaultExpanded: React.PropTypes.bool };
最佳答案
这里的问题是我的组件名为 Nav
.后来我有一个元素 <Nav>
这导致了 React 中的困惑。我也忘了导入 <Nav>
像这样在顶部的元素; import {Nav} from 'react-bootstrap'
.
关于javascript - 如何修复 ReactJS 中的 "too much recursion"错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36950705/