0

我有一个组件：

import React from 'react';

import Footer from '../Footer';
import AddTodo from '../../containers/AddTodo';
import VisibleTodoList from '../../containers/VisibilityTodoList';

const App = () => (
  <div>
     <AddTodo />
     <VisibleTodoList />
     <Footer />
  </div>
);

export default App;

我还有一个：

import React from 'react';
import App from './../../App/';
// import Footer from '../../Footer';

const Body = () => (
  <div>
    <App />
  </div>
);
export default Body;

请注意，第二个只是包装另一个组件的组件....

我不断收到以下错误，RangeError: Maximum call stack size exceeded

const routes = (
  <Route path="/" component={TopNavBar}>
    <IndexRoute component={Body} />
  </Route>
);
export default routes;

但是，如果我将其更改为：

const routes = (
      <Route path="/" component={TopNavBar}>
        <IndexRoute component={App} />
      </Route>
    );
    export default routes;

它工作得很好。请注意，唯一的区别是第一个，索引路由为“Body”，只是一个包装功能性 App 组件的功能性组件。为什么这会导致最大调用堆栈大小错误？

4

2 回答 2

0

我实际上弄清楚发生了什么......显然，我的app.js文件被命名为App/index.js. 我将它重命名为App/app.js，然后导入它，它工作得很好。我不知道为什么，但这就是问题所在，将我的文件重命名为app.js防止App/index.jsstackoverflow 错误。我什至不确定那里到底发生了什么..

于 2016-08-13T20:32:03.783 回答
0

我根据您的代码编写了一些代码，但无法复制您的错误，一切正常。我也尝试使用单独文件中的组件，但仍然一切正常。我认为问题中缺少一些东西。如果您愿意，我可以与您分享这 7 个文件，以便您尝试和比较。

import React, {PropTypes} from 'react';
import {Route, Router, browserHistory, IndexRoute} from 'react-router';


const TopNavBar =   () => (
  <div>
    "TopNavBar"
  </div>
);
const Footer =   () => (
  <div>
    "Footer"
  </div>
);

const AddTodo =   () => (
  <div>
    "AddTodo"
  </div>
);

const VisibleTodoList =   () => (
  <div>
    "VisibleTodoList"
  </div>
);

const App = () => (
  <div>
     <AddTodo />
     <VisibleTodoList />
     <Footer />
  </div>
);

const Body = () => (
  <div>
    <App />
  </div>
);
export default Body;


export default class Q2 extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (<Router history={browserHistory}>
      <Route path="/" component={TopNavBar}>
        <IndexRoute component={Body} />
      </Route>
    </Router>);
  }
}

Q2.propTypes = {
};
于 2016-08-13T14:23:33.630 回答