Question

超出最大调用堆栈大小 - reactjs

2017-09-11

5130

javascript jquery reactjs

我是 react.js 的初学者。

我收到此错误：

Maximum call stack size exceeded

我的浏览器 chrome 控制台中的完整错误输出：

Uncaught RangeError: Maximum call stack size exceeded
at warning (bundle.js:1977)
at callHook (bundle.js:11215)
at emitEvent (bundle.js:11225)
at Object.onBeforeMountComponent (bundle.js:11502)
at Object.mountComponent (bundle.js:13853)
at ReactCompositeComponentWrapper.performInitialMount (bundle.js:7622)
at ReactCompositeComponentWrapper.mountComponent (bundle.js:7509)
at Object.mountComponent (bundle.js:13856)
at ReactCompositeComponentWrapper.performInitialMount (bundle.js:7622)
at ReactCompositeComponentWrapper.mountComponent (bundle.js:7509)

我的代码：

var React=require('react');
var ReactDOM=require('react-dom');

class App extends React.Component{
    render(){
        return(
            <div>
                < Header />,
                < Main />,
                < Footer />
            </div>
        );
    }
}

class Header extends React.Component{
    render(){
        return(
            <Header>
                <nav>
                    <h1>Header</h1>
                </nav>
            </Header>
        );
    }
}

class Main extends React.Component{
    render(){
        return(
            <div>
                <p> text 1</p>
            </div>
        );
    }
}

class Footer extends React.Component{
    render(){
        return(
            <h2>Footer</h2>
        );
    }
}

ReactDOM.render(<App/> ,  document.getElementById('app'));

Answer 1

这是因为您在 header 组件中有 <Header> 标签，所以我认为这会导致无限循环。请尝试删除它。您正在 App 组件中调用 header，并且哪个 id 再次调用 header 组件等等。您应该像这样渲染

class Header extends React.Component{
render(){
    return(
            <nav>
                <h1>Header</h1>
            </nav>
    );
}
}

Answer 2

将此

class Header extends React.Component{
    render(){
        return(
            <Header>
                <nav>
                    <h1>Header</h1>
                </nav>
            </Header>
        );
    } 
}

更改为

class Header extends React.Component{
    render(){
        return(
            <div>
                <nav>
                    <h1>Header</h1>
                </nav>
        </div>
        );
    }
}

Answer 3

您正在通过在 Header 中呈现 Header 来进行递归调用。

更改您的代码以将 header 用于真正的 html 标记：

class Header extends React.Component{
    render(){
        return(
            <header>
                <nav>
                    <h1>Header</h1>
                </nav>
            </header>
        );
    }
}