Warum hat meine React App die Größe meiner Komponente geändert?

Question

Das ist das seltsamste Problem, das ich je gesehen habe. Ich habe den letzten Entwurf einer sehr einfachen App fertiggestellt und für Heroku bereitgestellt. War gut in Ordnung. Als ich heute darauf geklickt habe, wurde die Größe meiner Komponente viel größer als vorher.

Nichts, was ich getan habe, scheint bei der Größenanpassung der Komponenten zu funktionieren. Hier ist die App:

https://evening-falls-56985.herokuapp.com/

Wie Sie die Fläche unter der Navigationsleiste sehen kann, ist größer als der Bildschirm. Dies war nicht der Fall, als ich es einsetzte.

Hier ist der entsprechende Code von meiner Container-Komponente:

var React = require("react"); 
var Navbar = require("./Navbar"); 
var Projects = require("./Projects"); 
var AboutMe = require("./About"); 
var Contact = require("./Contact"); 
var Default = require("./Default"); 
var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); 


var componentToRender = <Default key = {'default'} />; 

var Container = React.createClass({ 
    getInitialState: function() { 
     return { 
      page: 'Default', 
     }; 
    }, 



    componentWillUpdate: function (nextProps, nextState) { 


     if(nextState.page == 'Default') { 
      componentToRender = <Default key = {nextState.page} />; 
      } 

     if (nextState.page == 'Projects') { 
      componentToRender = <Projects key = {nextState.page} />; 

     } 

     if (nextState.page == 'Contact') { 
      componentToRender = <Contact key = {nextState.page} />; 
     } 

     if (nextState.page == 'About') { 
      componentToRender = <AboutMe key = {nextState.page} />; 
     } 


    }, 

    pageSelected: function(newpage){ 
     this.setState({page:newpage}); 

    }, 


    render: function() { 
     return (
      <div> 
      <Navbar pageSelected = {this.pageSelected} /> 
      <ReactCSSTransitionGroup 
      transitionName="example" 
      transitionAppear={true} 
      transitionAppearTimeout={500} 
      transitionEnterTimeout={500} 
      transitionLeaveTimeout={500}> 

       {componentToRender} 

      </ReactCSSTransitionGroup> 
      </div> 

      ); 
    } 

}); 


module.exports = Container; 

Answer 1

Nach dem gerenderte Ergebnis <div class>, können Sie die CSS-Klasse für den div Container verpassen. (Manchmal können wir vergessen className als class in ReactJS, Tippfehler zu verwenden, oder die CSS durch die Irrwege importieren.)

Oder Sie brauchen nur Stil zu verwenden (max-width oder Breite) der img Breite zu begrenzen .