[Q&A] javascriptライブラリのRellaxをJSX内で使う方法を知りたいです

javascriptライブラリのRellaxをJSX内で使う方法を知りたいです

reactで画面を構築しています。
ライブラリのrellaxを使いたいので、JSX内の要素に「className」で名前をつけて
「script.js」内でrellaxのコードを書いているのですが、反映されません。

html内の要素には「class」で名前をつけることでrellaxが反映されるのは確認できています。

0 likes

1Answer

こちらに ref を使う方法と className を使う方法が両方書かれています。

これは予想ですが、 React によって実際に DOM が表示されたあとに new Rellax(element, options) を実行しないといけないためだと思います。

script.js に書くと、そのタイミングを制御することができず、 useEffect を使う必要があります。

useEffect の中身は開発環境では 2 回呼ばれてしまうことがあるので、それでうまくいかない場合は、クリーンアップ関数を使って後片付けすると良いかもしれません。

useEffect(() => {
  const rellax = new Rellax(parallaxElemRef);
  
  return () => {
    rellax.destory();
  }
}, [])

1Like

Are you sure you want to delete the question?