Question

如何在窗口对象上使用ReactJS onScroll？似乎没有可用的示例。

Answer 1

如果要将滚动侦听器附加到窗口对象，可以在componentDidMount钩中执行此操作，然后在componentDidUnmount钩中将其删除。

示例

class App extends React.Component {
  componentDidMount() {
    window.addEventListener("scroll", this.onScroll);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.onScroll);
  }

  onScroll = () => {
    console.log("Scrolling");
  };

  render() {
    return <div style={{ height: 3000 }}>Scroll me</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

您所指的import csv with open('CityPro.cvs') as f: r = csv.reader(f, delimiter=',') for line in r: print(line) f.close()是组件上滚动SyntheticEvent的道具。由于window对象不是react组件，因此您没有办法声明类似的内容。

您需要做的是将滚动事件侦听器附加到组件上对onScroll事件感兴趣的Windows对象上。

在窗口上使用React build in onScroll

2 个答案: