爲什麼我的React應用程序改變了我的組件的大小？

這是我遇到的最奇怪的問題。我完成了一個非常簡單的應用程序的最新草稿，並將其部署到Heroku。工作正常。當我今天點擊它時，我的組件的大小變得比以前大得多。爲什麼我的React應用程序改變了我的組件的大小？

沒有我所做的似乎在調整組件的大小。下面是應用程序：

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

正如你可以看到導航欄下的面積是大於屏幕。當我部署它時，情況並非如此。

這裏是我的容器組件的相關代碼：

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;

來源

2016-11-12 C.Gaye

嘗試刪除背景圖片，看看會發生什麼。我相信正在加載的圖像太寬，左/填充的動態渲染將根據圖像的寬度進行計算。例如，「我的個人資料」頁面沒有此問題，並且沒有背景圖片。 –

根據所呈現的結果<div class>，你可能會錯過的CSS類的DIV容器。（有時我們可能會忘記在ReactJS，錯字使用className爲class，或由錯誤的方法導入CSS）

或者你只需要使用樣式（最大寬度或寬度），以限制IMG的寬度。

來源

2016-11-12 09:55:25

爲什麼我的React應用程序改變了我的組件的大小？

回答

相關問題