web-dev-qa-db-ja.com

Reactでスタイル要素を作成してヘッドに追加するにはどうすればよいですか？

私は現在、Reactを学んでおり、（さらに重要なことに）反応が実際にどのように機能するかを学習しようとしています。

生成されたcssがいくつかあり、これをスタイル要素としてheadに追加したいと思います。 jsランドでは、これは次のようになります。

const $style = document.createElement("style");
document.head.appendChild($style);
const randBlue = ~~(Math.random() * 250);
$style.innerHtml = `body { color: rgb(10, 10, ${randBlue}); }`;

残念ながら、React=土地では、この点で状況が少しわかりにくくなっているように見えます。これを理解することは、スタイルを追加してすべての意欲を無効にすることは悪い習慣であるということです。また、ほとんどすべての人が、styled-components、glamorous、styled-jsx、またはインラインで生成されたcssを使用していることも認識しています。

しかし、私は理解していないモジュールを使用したくありません、そして私の知る限り、上記のほとんどはスタイル要素を作成し、それらを何らかの形で頭に追加します。その方法を知りたいのです。

したがって、Reactにいて、生成されたcssテキストがいくつかある場合：

const randomColor = Math.random() > 0.5 ? "red" : "blue";
const generatedCss = `body { color: ${randomColor}; }`;

ここには何が入っていますか？

createStyleElementAndAppendToHead(generatedCss) {
  // mystery code
};
cssreactjshtml-head
10
Seph Reed

Reactへようこそ！

反応ランドでは、styled-components、glamorous、styled-jsx、inlineなど、人々があなたにプッシュするベストプラクティスがあることは事実です。そして、私もそれらをお勧めします。

Reactjsの優れた点は、Vanilla JavaScriptを使用できることです。同じコードスニペットをライフサイクルで使用できますcomponentDidMount

componentDidMount() {
  const $style = document.createElement("style");
  document.head.appendChild($style);
  const randBlue = ~~(Math.random() * 250);
  $style.innerHTML = `body { color: rgb(10, 10, ${randBlue}); }`;
}

または、次のようにボディのインラインスタイルをターゲットにすることもできます。

componentDidMount() {
  const randBlue = ~~(Math.random() * 250);
  document.body.style.color = `rgb(10, 10, ${randBlue})`;
}

Reactフックの更新：

これを機能コンポーネントの最初に配置します

useEffect(() => {
  const randBlue = ~~(Math.random() * 250);
  document.body.style.color = `rgb(10, 10, ${randBlue})`;
}, []);
6
Craig1123