css - 在 Prop 上更新样式组件的样式变化缓慢？

Question

在我的父组件中，我有一个 onScroll 监听器，它确定我在滚动时是否点击了特定点。状态中存储了一个 bool 值。我将这个状态变量传递给 child 。在那个 child 中，我有一个样式化的组件，它随着作为 Prop 传递下来的 bool 状态变量而变化。当我滚动得非常快时，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>
    )
  }
}