Maximale Call-Stack-Größe überschritten - reactjs

Question

Ich bin ein Anfänger bei react.js.

ich diesen Fehler habe:

Maximum call stack size exceeded 

volle Fehlerausgabe in meinem Browser Chromkonsole:

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) 

meine Codes:

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

Veränderung dieser,

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

Um

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

Answer 2

Es ist, weil Sie <Header> Tag innerhalb haben die Header-Komponente, so dass eine Endlosschleife verursacht, denke ich..die Entfernung dieses .. Sie sind Calling Header in der App Komponente und die IDs wieder Aufruf der Header-Komponente und so weiter. Sie sollten ebenso wie machen diese

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

Answer 3

Sie einen rekursiven Anruf von Header in Header Rendering.

Code ändern header für echte HTML-Tags zu verwenden:

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