0

これは、実行時にヘルメットを使用してリンク 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秒があります。

不足しているものと、これを解決する方法を教えてください。

4

1 に答える 1