反应更新脚本标签的内容答案

【问题标题】：React update content of a script tag反应更新脚本标签的内容
【发布时间】：2021-11-13 20:15:07
【问题描述】：

我有以下脚本标签：

<script>
window.ac_vh_params = {
    containerId: 'container',
    folderName: '33/334'
};
</script>
<script src="https://somesdomain/main.js"></script>

我的目标是根据特定值更新和重新加载此脚本，因此我执行了以下操作：

import { useState, useEffect } from 'react';

const Demo = () => {
  const [selectedFolderName, setSelectedFolderName] = useState(null);

  useEffect(() => {
    if (!selectedFolderName) {
      return;
    }
    const container = document.getElementsByClassName('container')[0];
    container.innerHTML = '';
    const script1 = document.createElement('script');
    script1.text = `window.ac_vh_params = { containerId: 'container', folderName: '${selectedFolderName}' };`;
    container.appendChild(script1);
    const script2 = document.createElement('script');
    script2.src = 'https://somesdomain/main.js';
    container.appendChild(script2);
    return () => {
      container.removeChild(script1);
      container.removeChild(script2);
    }
  }, [selectedFolderName]);

  const handleClick = (e) => {
    const name = e.target.getAttribute('name') || e.currentTarget.getAttribute('name');
    setSelectedFolderName(name);
  };

  return (
    <div className="main">
      <button name="button1" onClick={handleClick}>Click 1</button>
      <button name="button2" onClick={handleClick}>Click 2</button>
      <div className="container">
      </div>
    </div>
  );
}

export default Demo;

代码按预期更改，但未重新加载新代码。我该如何解决这个问题？谢谢。

【问题讨论】：

标签： reactjs script-tag

【解决方案1】：

您是否尝试过更改 UseEffect 本身的参数？类似的东西

useEffect(()=>{

if (selectedFolderName) {
   window.ac_vh_params = { containerId: 'container', folderName: '${selectedFolderName}' };
    }
}
//... rest of code
)

【讨论】：

是的，它不起作用。我想我需要更新 Iframe 并重新加载它，但我不知道怎么做。

【解决方案2】：

我设法通过以下代码解决了它：

const container = document.getElementsByClassName('container')[0].contentWindow.document;
// const doc = document.getElementById('iframe').contentWindow.document;
container.open();
container.write(`
<script>
    window.ac_vh_params = {
        containerId: 'container',
        folderName: '${selectedFolderName}'
    };
</script>
<script src="https://somedomain/main.js"></script>
`);
container.close();

【讨论】：