これは、実行時にヘルメットを使用してリンク css を更新する単純化された React コンポーネントです。
function App() {
const [brand, setBrand] = useState('nike')
return (
<div className="App">
<Helmet>
<link rel="stylesheet" href={getBrandStyle(brand)} />
</Helmet>
<div>other contents here</div>
<!-- omitted the button components that change the brand state by calling setBrand -->
</div>
);
}
私は最近、head タグの子を変更する宣言的な方法として react-helmet を使用しました。上記のコードを使用すると、css を切り替えると、ページに css スタイルがなく、1 秒後に更新された css が表示されるときに一時的な遅延が発生します。上。
ページの初期ロード中であっても、次のような queryParameters (上記のコードはクエリ パラメータのアプローチを示していません) を使用すると、
https://localhost:3000?brandQueryParam=nike
ブランドcssが表示される前に、CSSスタイリングがない1秒があります。
不足しているものと、これを解決する方法を教えてください。