Javascript 根据<；中的变量值更改更新React组件；脚本>；标签？

我在添加javascript代码，该代码在

中的

标记中包含一些变量，我的目标是读取变量值并更新“variable”React函数组件中的计数器。我试图实现一些东西，但效果不好。任何帮助都将不胜感激

简言之，我试图做的是——当我点击一个sumbit按钮时，代码被追加到并运行。代码运行时，组件中的计数器也应更新

我在做类似的事情

const whenGameRunningGenerator = (greenBlocks, forwardRef) =>
  `Hatch.onSceneLoaded(async function(event) {
    window.requestAnimationFrame(checkInGame);
      function checkInGame() { 
        ${codeToAppend} 
        ${greenBlocks}
        console.log(score, lives, "renderme ======");
        ${forwardRef.current}.dispatchEvent(
          new CustomEvent("updateVariableCounter", {
            detail: {
              value: score // value of variable
            },
          })
        );
        window.requestAnimationFrame(checkInGame);
      }
});

但我认为这里的活动调度不好。（以上代码位于脚本标记内部，不是react组件） 谢谢