React.js 将无状态功能组件 <App /> 嵌套在另一个无状态组件中导致： RangeError: Maximum call stack size exceeded答案

【问题标题】：React.js nesting stateless functional component <App /> in another stateless component results in: RangeError: Maximum call stack size exceededReact.js 将无状态功能组件 <App /> 嵌套在另一个无状态组件中导致： RangeError: Maximum call stack size exceeded
【发布时间】：2016-08-13 12:52:32
【问题描述】：

我有一个组件：

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 组件的功能性组件。为什么会导致最大调用堆栈大小错误？

【问题讨论】：

标签： reactjs react-router react-router-component

【解决方案1】：

我根据您的代码编写了一些代码，但无法复制您的错误，一切正常。我也尝试使用单独文件中的组件，但一切正常。 我认为问题中缺少某些内容。如果您愿意，我可以与您分享这 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 = {
};

【讨论】：

【解决方案2】：

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

【讨论】：