問題タブ [react-loadable]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 動的インポート - NextJS
スクリプトをロードする単純な関数があります。
NextJS に移行する前は、次のスクリプトをインポートしていました: import creditCardScript from "./creditCardScript".
windowSine NextJS は Node でサーバー側のコンポーネントをレンダリングするため、 (ブラウザ固有の)への参照を含むコードが まで呼び出されないように注意する必要がありますcomponentDidMount。
NextJS は、動的インポート( react- loadable のラッパー) を提供することでこの問題を解決します。
- 必要なときにのみコンポーネントをロードします。
- クライアント側でのみコンポーネントをロードするオプションを提供します (
ssr: false)。
私は先に進み、動的インポートを実装しました:
でcomponentDidMount：
しかし、私はこれを得ています：
Uncaught TypeError: Cannot call a class as a function
関数をクラスに変換し、コンストラクターを使用して を渡そうとしましたargsが、コードがサイレントに失敗するようになりました。
javascript - React Loadable がブラウザーの更新時に更新されない
いくつかの情報を含む一連のカードをレンダリングするスライドがあります。カードの高さは、最も高いカードの高さに基づいています。react-slickスライダーに使用しています。最初のレンダリングでは、カードはすべて 1 つの高さに設定されていますが、ブラウザーを更新すると、カードの高さが同じではありません。
私のコードは次のとおりです
Slider.jsx
Loadable は非同期コンポーネントであることを理解しています。それがブラウザの更新時に高さを設定しない理由である可能性があります