ReactJS - 重新渲染组件时内联样式不会更新答案

【问题标题】：ReactJS - Inline styling does not update upon rerendering of componentReactJS - 重新渲染组件时内联样式不会更新
【发布时间】：2016-10-05 18:19:05
【问题描述】：

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

目前，我的设置如下：

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>
    );
  }
}

如果有人有任何建议，我将不胜感激。谢谢！

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

最初它工作正常，因为你有 translateY(0) 并且在 css 0 中没有 'px' 很好，但是一旦你更新你尝试做 translateY(35) 但 css 需要一个 px 值所以只需更改为 translateY(${scrolled}px)

【讨论】：

哦，当然！这个小错误让我困惑了很长一段时间。非常感谢。