Question

这是我遇到的最奇怪的问题。我完成了一个非常简单的应用程序的最新草稿，并将其部署到Heroku。工作正常。当我今天点击它时，我的组件的大小变得比以前大得多。

我所做的一切似乎都无法调整组件的大小。这是应用程序：

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;

Answer 1

根据渲染结果git commit --ammend，您可能会错过div容器的CSS类。（有时我们可能忘记在ReactJS中使用<div class>作为className，拼写错误，或者以错误的方式导入CSS。）

或者你只需要使用样式（最大宽度或宽度）来限制img的宽度。

为什么我的React App会改变组件的大小？

1 个答案: