reactjs react-sticky 用于固定/粘性标头不起作用答案

【问题标题】：reactjs react-sticky for fixed/sticky header not workingreactjs react-sticky 用于固定/粘性标头不起作用
【发布时间】：2016-11-03 02:01:40
【问题描述】：

我想使用react-sticky 来创建我的页眉和页脚组件。

App.js：

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

Header.js：

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

SomeContent.js：

class SomeContent extends React.Component {
    render() {
        var style = {
            width: '100%',
            height: '1500px',
            border: '1px solid red'
        }
        return(
            <div style={style}>
                <p>Lorem</p>
            </div>
        );
    }
}

页面正在显示 App.js，包括 Header 和 SomeContent。但是，如果我向下滚动，标题不会粘在/固定在其位置。它像任何普通的 div 一样向上移动。我在哪里失踪？请帮我。谢谢。

【问题讨论】：

标签： reactjs

【解决方案1】：

Sticky 组件为子组件提供了一些道具，因此您的 header.js 应该是。其中style为react-sticky计算的常规样式对象

class Header extends React.Component {
  render() {
    return(
      <StickyContainer>
        <Sticky>
          {({
            style,
          }) => (
            <header style={style}>
              <h1>Header</h1>
            </header>
          )}
        </Sticky>
      </StickyContainer>
    );
  }
}

【讨论】：

【解决方案2】：

不确定是否为时不晚，但我相信您将 StickyContainer 放在错误的位置。因此，对于您的示例，它应该是这样的：

class App extends React.Component {
        render() {
            return (
                <StickyContainer>
                    <Header />
                    <SomeContent />
                </StickyContainer>
            );
        }
}

和

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

【讨论】：