Question

我在尝试为我的某个组件实现视差风格效果时遇到了问题。目前，我正在通过在组件安装后设置滚动侦听器并在滚动时更改组件状态来转换内联样式。但是，即使我已经在渲染函数中检查了状态的输出并且似乎具有正确的输出，在重新渲染期间内联样式似乎也没有改变。我试过检查以前的答案，但我还没有能够纠正这个问题。

目前，我的设置如下：

＆＃13;

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      style: {
        transform: 'translateY(0)'
      }
    };
    this.parallax = this.parallax.bind(this);
  }

  componentDidMount() {
    window.addEventListener('scroll', this.parallax);
  }

  componentWillUnMount() {
    window.removeEventListener('scroll', this.parallax);
  }

  parallax() {
    function onScroll() {
      let scrolled = window.pageYOffset;
      this.setState({
        style: {
          transform: `translateY(${scrolled})`
        }
      });
    }

    if(window.pageYOffset < window.innerHeight) {
      window.requestAnimationFrame(onScroll.bind(this));
    }
  }

  render() {
    return (
      <div className="home-wrapper" style={this.state.style}>
      </div>
    );
  }
}

＆＃13;

如果有人有任何建议我会很感激。谢谢！

Answer 1

最初它工作正常，因为你有translateY(0)并且css 0没有'px'就好了但是一旦你更新你正试图做translateY(35)但是css期望一个px值所以只需改为{ {1}}

ReactJS - 内联样式在重新呈现组件时不会更新

1 个答案: