在 React 中动态加载的 CSS 无法间歇性地工作

Question

我在 React 中制作了一个"可插拔"系统，它动态运行由 HTML、JS 和 CSS 文件组成的微小"应用程序"。HTML 和 CSS 文件是可选的。它们通过窗口对象相互通信。

我在这里动态加载这三个文件，但我遇到了我的 CSS 类无法正常工作 1/5 的问题。它们似乎甚至没有被解析，因为我也无法在 Chrome 开发工具中手动应用它们。

我尝试使用link和style标签来加载 CSS，但两者都有相同的问题。即使是 CSS 和 HTML 注入之间的 1000ms setTimeout 也无济于事。CSS 解析在组件挂载时大约每三次失败一次。

我尝试过Chrome，Firefox和Safari。这三者都有同样的问题。

我有点卡住了，我很想得到一些反馈。

这是该问题的视频：(这里的"应用程序"是一个简单的SVG文件查看器(http://www.giphy.com/gifs/dvHjBBolgA1xAdyRsv

const windowInitialized = useElementBlockInitialization({
id: elementBlockID,
payload: payload,
onResult: onResult
});
const [styleAndHTMLInitialized, setStyleAndHTMLInitialized] = useState(false);
// after some properties are set in Window, run this effect
useEffect(() => {
let gettingStyleAndHTML = false;
if (windowInitialized) {
gettingStyleAndHTML = true;
getStyleAndHTML().then(({ styleBody, htmlBody }) => { // async function that fetches some html and css as a string (both potentially null)
if (gettingStyleAndHTML) {
if (styleBody) {
const styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.appendChild(document.createTextNode(styleBody));
document.head.appendChild(styleElement);
}
if (htmlBody) {
// containerElement is a ref
containerElement.current.innerHTML = htmlBody;
}
setStyleAndHTMLInitialized(true);
}
});
}
return () => {
gettingStyleAndHTML = false;
};
}, [windowInitialized]);
// after the CSS and HTML is injected, run this hook
useEffect(() => {
if (styleAndHTMLInitialized) {
const scriptElement = document.createElement('script');
scriptElement.setAttribute('data-eb-container-id', containerElementID);
scriptElement.setAttribute('data-eb-id', elementBlockID);
scriptElement.setAttribute('src', makeElementBlockBaseURL() + '.js');
document.head!.appendChild(scriptElement);
return () => {
scriptElement.remove();
};
}
return;
}, [styleAndHTMLInitialized]);
// only render the container once the window properties are set
return windowInitialized ? (
<Container ref={containerElement} id={containerElementID} />
) : null;

Answer 1

我想通了。

我自动生成的类名偶尔会以数字开头。CSS类名显然不能以数字开头！

咚咚。