我正在学习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!
确实,在反应土地上有人们会像风格组件,迷人,风格-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})`;
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。