onScroll イベント後にコンポーネントスタイルを設定する

1. クラスコンポーネントのための React onScroll イベント
2. 機能コンポーネントのための React onScroll イベント

React アプリケーションを開発する場合、多くの場合、ユーザーの入力をリッスンし、それに応じて状態を更新する必要があります。たとえば、現在ユーザーのビューにあるコンポーネントを強調表示したい場合があります。

コンポーネントのスタイルを条件付きで更新するには、インラインコンポーネントや styled-components ライブラリなどの CSS-in-JS ソリューションを使用することをお勧めします。

先に進む前に、scroll イベントのイベントリスナーを設定する必要があります：window.addEventListener('scroll')。次に、スクロールイベントのハンドラー関数を定義できます。

クラスコンポーネントのための React onScroll イベント

わずかに異なる設計にもかかわらず、React クラスのコンポーネントは機能コンポーネントと非常によく似ています。2つの大きな違いの 1つは、クラスコンポーネントにフックがないことです。代わりに、ライフサイクルメソッドの 1つを使用できます。

componentDidMount()

物事を単純にするために、最も予測可能な動作を伴うライフサイクルメソッドを使用しましょう。scroll イベントのリスナーを設定した後、window.addEventListener() メソッドの 2 番目の引数としてハンドラーを渡す必要があります。次に、ライフサイクルメソッド内で、ハンドラーを呼び出す必要があります。playcode.ioのこの例を見てみましょう。

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      fontSize: 16
    }
    this.handleScroll = this.handleScroll.bind(this)
  }
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
    this.handleScroll();
  };
  handleScroll(event)  {
    this.setState({fontSize: window.pageYOffset})
  }
  render() {
    return <div style={{height: "150vh", width: "80vw", fontSize: this.state.fontSize, marginTop: "100px"}}>Hi! Try edit me</div>;
  }
}

<div> 要素がスクロールされるたびに、状態が変化するため、コンポーネントが再レンダリングされます。ハンドラーは、ウィンドウオブジェクトの pageYOffset プロパティに基づいて状態を更新します。この window.pageYOffset の値は、下にスクロールした距離を示します。

playcode.ioにアクセスして、自分で試してみてください。下にスクロールするほど、フォントは大きくなります。

機能コンポーネントのための React onScroll イベント

スクロールイベントに基づいて変更をトリガーするには、まず、このイベントのリスナーを設定する必要があります。これは、window.addEventListener('scroll') メソッドを呼び出すことで実行できます。呼び出しでリッスンしているイベントのタイプを指定する文字列を渡す必要があることに注意してください。この場合、'scroll'を渡します。2 番目の引数は、イベントハンドラーへの参照である必要があります。

useEffect()

useEffect() は、すべてのクラスコンポーネントのライフサイクルフックの組み合わせと考えることができます。この場合、componentDidMount() フックの動作を複製するために、2 番目の引数として空の配列を渡します。例：

const [fontSize, setFontSize] = useState(0);
const handleScroll = () => setFontSize(window.pageYOffset)
  useEffect(() => {
    window.addEventListener('scroll', handleScroll)
  }, []);

fontSize 変数の値は動的に変化します。インラインスタイルで参照して、要素のスタイルを変更できます。

<div style={{height: "150vh", width: "80vw", fontSize: fontSize, marginTop: "100px"}}>Hi! Try edit me</div>;

this.state オブジェクトではなく、機能コンポーネントの状態変数への単純な参照を渡すことに注意してください。