🚀

Astro + ReactでuseStateが使えずハマった

2022/10/30に公開

概要

tsxコンポーネントをastroファイルから呼んだところuseStateやらaxios関連が動かない
(JavaScriptが動いていない)

解決法

コンポーネントにclient:loadをつける

<YourReactComponent client:load />

client:*と指定することで

  • コンポーネントがビルド時にレンダリングされるかどうか
  • コンポーネントで使用されているJavaScriptがクライアントサイドで、いつブラウザに読み込まれるか

など設定できるようです
(もっと読み込まなくては)

参考

https://docs.astro.build/ja/core-concepts/framework-components/#インタラクティブなコンポーネント

Discussion