javascript - 从另一个函数设置组件的状态

Question

我有一个有状态组件，它有一个像这样的滚动事件监听器

import React, { Component } from 'react'
import { withRouter } from 'react-router'
import AppDetailPageUI from './AppDetailPageUI.js'


class AppDetailPageSF extends Component {
  constructor(props) {
    super(props);
    this.state = {
        scrolledDown:false,
    };

    this.handleScroll = this.handleScroll.bind(this);
  }

  render() {
    return (
      <AppDetailPageUI

        scrolledDown={this.state.scrolledDown}
      />
    );
  }


   componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll(event)  {

    if (window.scrollY === 0 && this.state.scrolledDown === true) {
      this.setState({scrolledDown: false});
    } 
    else if (window.scrollY !== 0 && this.state.scrolledDown !== true) {
      this.setState({scrolledDown: true});
    }
  }

}

export default withRouter(AppDetailPageSF)

这工作得很好。但是我想在许多有状态组件中使用handleScroll方法，并且在每个组件中包含相同的方法并不是一个好的做法。

所以这就是我尝试过的，我创建了另一个类似这样的 HandleScrollUtil 函数

const HandleScrollUtil = {
    handleScroll: function(component) {

    if (window.scrollY === 0 && component.state.scrolledDown === true) {
        component.setState({scrolledDown: false});
    } 
    else if (window.scrollY !== 0 && component.state.scrolledDown !== true) {
        component.setState({scrolledDown: true});
    }
  }
}

export default HandleScrollUtil

然后我尝试通过传递此引用来调用此方法，如下所示

componentDidMount() {
    window.addEventListener('scroll', HandleScrollUtil.handleScroll(this));
  }

  componentWillUnmount() {
    window.removeEventListener('scroll',  HandleScrollUtil.handleScroll(this));
  }

但是现在好像不行了。

Answer 1

只有相应的组件可以处理其状态，您可以在内部创建处理程序AppDetailPageSF 组件类似

setScrollDownHandler = (event,scrollValue) =>{
 this.setState({scrolledDown: scrollValue});
}

然后你可以将此处理程序传递给任何具有 prop 的组件，这是正确的方法。

更新状态的代码必须位于同一个组件中，我们所能做的就是创建一个处理程序来处理它，并将该处理程序传递到我们要处理的地方想更新它。

Solution is a Higher Order Component

我建议使用这样的HOC，它可以包装到您要使用的任何组件。

import React, { Component } from 'react';


const withScrollHandler = (WrappedComponent) => {
    return class extends Component {

        componentDidMount() {
              this.props.setScrollDownHandler();
        }

        componentWillUnmount() {
              this.props.setScrollDownHandler();
        }

        render () {
            return (
                <div>
                    <WrappedComponent {...this.props} />
                </div>
            );
        }
    }
}

export default withScrollHandler;