我正在学习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,因为它们可以避免上述威利猥亵可能产生的许多问题.
但我不想使用我不了解的模块,据我所知,上面的大多数创建样式元素并以某种方式将它们添加到头部,我想知道如何.
所以,如果我在React中并且有一些生成的css文本：
const randomColor = Math.random() > 0.5 ? "red" : "blue";
const generatedCss = `body { color: ${randomColor}; }`;
这里有什么？
createStyleElementAndAppendToHead(generatedCss) {
// mystery code
};
最佳答案
欢迎来到React！
原文链接：https://www.f2er.com/css/427004.html确实,在反应土地上有人们会像风格组件,迷人,风格-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,${randBlue}); }`;
}
或者你甚至可以像这样定位身体的内联样式：
componentDidMount() {
const randBlue = ~~(Math.random() * 250);
document.body.style.color = `rgb(10,${randBlue})`;
}
React Hooks更新：
把它放在功能组件的开头
useEffect(() => {
const randBlue = ~~(Math.random() * 250);
document.body.style.color = `rgb(10,${randBlue})`;
});
