无法为username字段实现react-sticky组件

Question

我正在使用React构建一个简单的Web应用程序，用户输入有效的用户名来显示最近吃过的食物的日记。我在页面顶部有一个用户名字段，当用户向下滚动整个页面时，我希望它是粘性的。但就像现在一样，用户名字段只是像普通组件一样滚出视图。我错过了什么？任何帮助将不胜感激。

app.js

import React, { Component } from 'react';
import {StickyContainer, Sticky} from 'react-sticky';
import Username from '../containers/username';
import DiaryList from '../containers/diary_list';

export default class App extends Component {
  render() {
    return (
      <div>       
        <h1 className="text-xs-center">Diary</h1>
        <StickyContainer>
            <Sticky>
                {() => {
                    return <Username />}}
            </Sticky>
            <DiaryList />
        </StickyContainer>
      </div>
    );
  }
}

username.js

import React, {Component} from 'react';
import {connect} from 'react-redux';

import {fetchUser} from '../actions/index';

class Username extends Component {
    constructor(props){
        super(props);

        this.state = {term: ''};
        this.onInputChange = this.onInputChange.bind(this);
    }

    onInputChange(event) {
        this.setState({term: event.target.value}, 
            () => this.props.fetchUser(this.state.term)
        );
    }

    render(){
        return(
            <div className="username">
                <span className="username-field">Username:</span>
                <input value = {this.state.term}
                onChange={this.onInputChange}   />
            </div>
        )   
    }
}

export default connect(null, {fetchUser})(Username);

diary_list.js

import React, {Component} from 'react';
import {connect} from 'react-redux';
import DishChart from './dish_chart';

class DiaryList extends Component {
    constructor(props) {
        super(props);

        this.state = {width: $(window).width(), 
                        height: $(window).height()
        }

        this.updateDimensions = this.updateDimensions.bind(this);
    }

    componentDidMount() {
        window.addEventListener("resize",  this.updateDimensions);
    }

    componentWillUnmount() {
        window.removeEventListener("resize", this.updateDimensions);
    }

    updateDimensions() {
        this.setState({width: $(window).width(), height: $(window).height()});
    }

    renderDiary(diaryData, key=diaryData.dishId) {
        return (
            <div key={diaryData.dishId}>
                <div  className="col-sm-6 col-md-4 col-lg-3" >
                    <ul className="list-group">
                        <li className="list-group-item">
                            <img className="img-thumbnail"src={diaryData.imageLink} alt="No image available."/>
                        </li>
                        <li className="list-group-item">{diaryData.dishName}</li>
                        <li className="list-group-item">Price: {diaryData.price}</li>
                        <li className="list-group-item">Calories: {diaryData.calories}</li>
                        <li className="list-group-item">Health Score: {diaryData.healthScoreM}</li>
                        <div className="container-fluid">
                        <li className="list-group-item row">
                            <div className="col-xs-4 carbs">
                                {`${diaryData.carbohydrates}G Carbs`}
                            </div>
                            <div className="col-xs-4 fat">
                                {`${diaryData.totalFat}G Fat`}
                            </div>
                            <div className="col-xs-4 protein">
                                {`${diaryData.protein}G Protein`}
                            </div>
                        </li>
                        </div>
                        <li className="list-group-item recharts-wrapper">
                        <DishChart data={diaryData} />
                        </li>
                    </ul>
                </div>
                {($(window).width() >= 480 && $(window).width() < 768) &&
                    key % 2 == 1 && 
                        <div className="clearfix visible-sm-block"></div>
                }
                {($(window).width() >= 768 && $(window).width() < 992) &&
                    key % 3 == 2 &&
                        <div className="clearfix visible-md-block"></div>
                }
                {$(window).width() >= 992 &&
                    key % 4 == 3 &&
                        <div className="clearfix visible-lg-block"></div>
                }
            </div>
        )
    }

    render() {
        if (this.props.diary.data == undefined) {
            return (
                <div>
                    Please enter a valid username.
                </div>
            )
        }

        return (
            <div className="diary">
                {this.props.diary.data.map(this.renderDiary)}
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        diary: state.diary
    };
}

export default connect(mapStateToProps)(DiaryList);