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。还有其他方法来组合两个对象，这只是一个偏好。

为什么在这个简单的例子中没有反应粘性工作？

1 个答案: