如何解决动态将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 举报,一经查实,本站将立刻删除。