Question

我正在制作个人网站做出反应，我想用滚动做一些技巧，但是你知道它是怎么回事，卡在第一步。我的反应就是

  class App extends Component {
  makeTextLarger(e) {
    console.log(e)
    console.log("scrolling")
  }
  componentDidMount() {
      const list = ReactDOM.findDOMNode(this.refs.test)
      console.log(list)

      list.addEventListener('scroll', this.makeTextLarger);
  }
  componentWillUnmount() {
      const list = ReactDOM.findDOMNode(this.refs.test)
      list.removeEventListener('scroll', this.makeTextLarger);
  }
  render() {
    var style = {
      height: '10000px',
      fontSize: 200,
      background: 'blue'
    };
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title"</h1>
        </header>
        <p className="App-intro">
          text to be made bigger at some point
        </p>
        <div ref="test" style={style}>
          Pls
        </div>
      </div>
    );
  }
}

滚动时没有任何东西闪现。如果我改为查看使用窗口而不是特定的div，它可以工作。当我在console.log列表中时，它确实返回了一个html对象，所以我不确定为什么我的绑定有选择地工作。有什么想法吗？

Answer 1

尝试使用onScroll处理程序反应优惠

  render() {
    var style = {
      height: '10000px',
      fontSize: 200,
      background: 'blue'
    };
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title"</h1>
        </header>
        <p className="App-intro">
          text to be made bigger at some point
        </p>
        <div onScroll={this. makeTextLarger} style={style}>
          Pls
        </div>
      </div>
    );
  }
}

如果你坚持使用参考

<div ref={ref => this.title = ref} style={style}>
          Pls
</div>

然后在你的生命周期方法中使用this.title。

最后总是绑定你的事件处理程序

makeTextLarger = (e) => {
    console.log(e)
    console.log("scrolling")
  }

Answer 2

您可以向组件添加一个事件监听器，该监听器读取＆＃34;滚动＆＃34;事件。

例如，这里是对组件的重写。只更改了方法，没有添加任何引用：

class App extends Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
  }
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll)
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll)
  }
  handleScroll = () => {
    this.setState(
      { count: this.state.count + 1 },
      console.log('Scroll', this.state.count)
    )
  }
  render() {
    var style = {
      height: '10000px',
      fontSize: 200,
      background: 'blue'
    }
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title" />
        </header>
        <p className="App-intro">text to be made bigger at some point</p>
        <div ref="test" style={style}>
          Pls
        </div>
      </div>
    )
  }
}

您将通过此方式向您的浏览器提供源源不断的console.logs。它应该接近准确但不完美，因为this.setState是异步的。

您还可以使用handleScroll = (e) => {

传递活动本身

供参考：Update style of a component onScroll in React.js

onScroll in react仅适用于窗口？

2 个答案: