在道具上更新样式组件的样式变化缓慢？

Question

在我的父组件中，我有一个 onScroll 侦听器，用于确定滚动时是否命中特定点。状态中存储了一个布尔值。我将此状态变量传递给一个孩子。在那个孩子中，我有一个样式化的组件，它随着作为道具传递的布尔状态变量而变化。当我滚动得非常快时，css 似乎变化得很慢。有没有办法加快速度？

父组件：

 class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      flag: false
    }
  }

  componentDidMount() {
    var test = ReactDOM.findDOMNode(this.refs.test);
    test.addEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    if (test.scrollTop = 10) {
      this.setState({
        flag: true
      })
    } else {
      this.setState({
        flag: false
      })
    };
  }
  render() { 
    return (
      <Component ref="test" >
      <Child flag={
        this.state.flag
      }/> 
      </Component>
    )
  }
}

子组件：

const Container = styled.div`
     height: ${({flag})=>flag ? "10px" : "50px"}
`;

....
....
....

render(){
  <Container flag={this.props.flag}/>
}

这是我通常所做的一个非常基本的想法，当我快速滚动超过触发点时，渲染之前需要一秒钟。无论如何我可以避免这种延迟并加快速度。或者你们有没有更好的方法推荐这样做。

Answer 1

在handleScroll 方法中，您没有声明测试。您应该执行以下操作：

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      flag: false
    }
  }

  componentDidMount() {
    var test = ReactDOM.findDOMNode(this.refs.test);
    test.addEventListener('scroll', this.handleScroll);
  }

  handleScroll = (event) => {
    if (event.scrollTop = 10) {
      this.setState({
        flag: true
      })
    } else {
      this.setState({
        flag: false
      })
    };
  }
  render() {
    return ( 
      <Component ref="test">
        <Child flag={
          this.state.flag
        }/> 
      </Component>
    )
  }
}