Блог

Я пытаюсь заставить встраиваемый html-скрипт электронной коммерции работать в React, отображая его из компонента. Пример ниже:

 <div data-embed="store">
    <script type="application/json">
        {"some json text"}
    </script>
</div>
<script async src="https://website.com/loader.js"></script>
  

Из того, что я смог собрать, я могу использовать хук useEffect, но не смог заставить его работать правильно.

Вы можете сделать это useEffect , создав script элемент, добавив src атрибут async and и добавив его в тело документа. После этого импортированный JS будет доступен по всему миру. РЕДАКТИРОВАТЬ: то же самое можно применить к JSON, за исключением необходимости загружать его вручную.

 const [json, setJson] = useState(null);
useEffect(() => {
  const script = document.createElement('script');

  script.src = "https://website.com/loader.js";
  script.async = true;

  document.body.appendChild(script);

  // json
  const jsonScript = document.createElement('script');
  jsonScript.innerHTML = `
      {
        "greeting": "hello"
      }
    `;
  jsonScript.id = 'json';
  jsonScript.type = 'application/json';

  document.body.appendChild(jsonScript);

  setJson(JSON.parse(document.getElementById('json').innerHTML));
}, []);