Question

我想使用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一样向上移动。我在哪里错过了？请帮我。谢谢。

Answer 1

不确定是不是太晚了，但我相信你把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>
        );
    }
}

Answer 2

Sticky组件为子组件提供了一些支持，因此您的header.js应该是。样式是由react-sticky

计算的常规样式对象

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

reactjs反应粘性固定/粘性标头不起作用

2 个答案: