Question

我目前正在学习React，并且（更重要的是）试图了解反应的实际效果。

我有一些生成的css，我想将其作为样式元素添加到头部。在js land中，这将是：

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

不幸的是，在React的土地上，在这方面似乎不那么直截了当。我对此的理解是，将所有样式添加到willy nilly是不好的做法，因为有足够的人做这件事会导致问题。我也认识到，大多数人都使用样式组件，魅力四射，样式化的jsx，或内联生成的CSS，因为它们可以解决许多可能来自上述威利猥亵的问题。

但是我不想使用我不了解的模块，据我所知，上面的大多数创建样式元素并以某种方式将它们附加到头部，我想知道如何。< / p>

所以，如果我在React中并且有一些生成的css文本：

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

这里有什么？

createStyleElementAndAppendToHead(generatedCss) {
  // mystery code
};

Answer 1

欢迎来到React！

确实，在反应土地上，人们会像风格的组件，迷人的，样式化的jsx，内联等一样推动你的最佳实践。我甚至会推荐那些。

关于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 Hooks更新：

将它放在功能组件的开头

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

如何在React中创建样式元素并追加？

1 个答案: