动态将JavaScript添加到页眉，然后在TypeScript中执行Onload

问题描述

我正在努力将ReactJs转换为Typescript

renderMyThing = (): void => {
    const { name,window} = this.props;

    window[`render${name}`](`${name}-container`);
  };

为了提供上下文，在下面的块中调用

const script = document.createElement('script');
script.id = scriptId;
script.crossOrigin = '';
script.src = `${host}${manifest['main.js']}`;
script.onload = this.renderMyThing;
document.head.appendChild(script);

它基本上将脚本添加到页面标题并在加载时运行javascript方法

随着脚本和目标容器根据道具的变化而变化，这是动态的。

例如可能是

• window[ renderMenu ]( $菜单容器);
• window[ renderCustomer ]( $ content-container );

摘自这篇出色的文章https://github.com/micro-frontends-demo/container/blob/master/src/MicroFrontend.js

打字稿defs中的Window对象没有类型为'string'的索引表达式，而是'number'。

我的解决方案是通过添加以下代码以使打字稿确信它是有效的，以避免编译错误

declare global {
   interface Window {
   [script: string]: (container: string) => (this.GlobalEventHandlers,ev: Event) => any;
   }
}

它在运行时有效，但这是正确的吗？请让我知道是否有更好的方法，或者我要保留一个问题供以后使用！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）