reactjs - 为什么在这个简单的例子中，react-sticky 不起作用？

Question

我正在尝试使用 react-sticky 使一些标题信息保留在屏幕顶部。 .

但是，标题只是像普通页面一样在屏幕上滚动。在 Windows 10 上使用 Chrome 和 Edge 进行测试。两种浏览器中的情况相同。使用 webpack-dev-server 提供服务。

我使用 create-react-app 创建了该应用程序。相关代码为

import React, { Component } from "react";
import { StickyContainer, Sticky } from "react-sticky";
import Lorem from "react-lorem-component";

const App = () =>
    <StickyContainer>
      <Sticky>
        { () => <h1 style={{ backgroundColor: "#00ff00" }}>Sticky Demo!"</h1> }
      </Sticky>

      <Lorem count={50} />
    </StickyContainer>;

export default App;

我正在使用最新的库。这是package.json

{
  "name": "sticky-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-lorem-component": "^0.12.1",
    "react-sticky": "^6.0.1"
  },
  "devDependencies": {
    "react-scripts": "1.0.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

肯定有什么东西在盯着我看，而我却错过了。

Answer 1

您需要将 style 属性传递给您的粘性元素，例如如下所示:

<Sticky>
  {({ style }) => <h1 style={{ ...style, backgroundColor: '#00ff00' }}>Sticky Demo!"</h1>}
</Sticky>

这是使用 stage-0 preset 中的扩展运算符，您需要安装它并将其添加到您的 .babelrc 中。不过，还有其他方法可以组合两个对象，这只是一种偏好。