ReactJS - コンポーネントの再レンダリング時にインラインスタイリングが更新されない

Question

コンポーネントの1つに対して視差スタイルエフェクトを達成しようとしているときに問題が発生しました。現在、コンポーネントのマウント後にスクロールリスナーを設定し、スクロール時にコンポーネントの状態を変更することで、インラインスタイルを変換しています。しかし、レンダリング機能で状態の出力をチェックして正しい出力があるように見えても、インラインスタイルは再レンダリング中に変更されないようです。以前の回答を確認しようとしましたが、この問題を解決できませんでした。次のように

現在、私のセットアップは次のとおりです。誰もが何か提案を持っている

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

場合、私はそれを感謝します。ありがとう！

Answer 1

あなたはtranslateY(0)を持っているとCSS 0に「PX」なしで結構ですが、あなたが更新したら、あなたがtranslateY(35)をやろうとしているが、ちょうどまた、HTTP translateY(${scrolled}px)