Saya telah membuat sistem "pluggable" di React, yang secara dinamis menjalankan "aplikasi" kecil yang terdiri dari file HTML, JS, dan CSS. File HTML dan CSS adalah opsional. Mereka berkomunikasi melalui objek jendela.

Saya memuat tiga file secara dinamis di sini, tetapi saya mengalami masalah bahwa kelas CSS saya gagal berfungsi 1/5 kali. Mereka bahkan tampaknya tidak diuraikan karena saya juga tidak dapat menerapkannya secara manual di Chrome devtools.

Saya telah mencoba menggunakan tag link dan style untuk memuat CSS, tetapi keduanya memiliki masalah yang sama. Bahkan 1000ms setTimeout antara CSS dan injeksi HTML tidak membantu. Penguraian CSS secara konsisten gagal kira-kira setiap ketiga kali komponen dipasang..

Saya sudah mencoba Chrome, Firefox, dan Safari. Masalah yang sama di ketiganya.

Saya agak terjebak, saya ingin mendapatkan umpan balik tentang ini ..

Berikut adalah video masalahnya: ("aplikasi" di sini adalah penampil file SVG sederhana) 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;
1
Frank Sandqvist 7 Agustus 2019, 19:20

1 menjawab

Jawaban Terbaik

Saya menemukan jawabannya.

Nama kelas saya yang dibuat secara otomatis terkadang dimulai dengan angka. Nama kelas CSS tampaknya tidak dapat dimulai dengan angka!

Do'h.

0
Frank Sandqvist 6 September 2019, 09:33