如何解决如何从帮助程序脚本导入的变量更改上重新呈现组件?
我有类似下面的代码,我想和您一起检查是否有更好的方法。基本上,我有一个从第三方API获取数据的帮助程序脚本。我希望每次调用API时都会重新导入导入此辅助脚本的组件。该API被多次调用。
我现在正在这样做:
MyClass脚本:
import { rerenderComponentList } from '../../../helpers/myscript';
export default class MyClass extends LitElement {
static get properties() {
return {
item: {},};
}
constructor() {
super();
this.item = [];
rerenderComponentList(this);
}
render() {
const icon = Iconify.renderSVG(this.item.icon,{});
return html` <div>Hello</div> `;
}
static get styles() {
return styles;
}
}
导入的rerenderComponentList
函数用于将当前元素对象发送到帮助脚本。
助手脚本:
const list = [];
export function rerenderComponentList(object) {
list.push(object);
}
function rerenderComponent() {
list.map((item) => item.requestUpdate());
}
function callbackIcons(loaded) {
if (loaded.length) {
rerenderComponent();
}
}
//Function used to call API in app.js
export function loadIcons(icons) {
API.myfunction(icons,callbackIcons);
}
rerenderComponent
函数用于在每个元素对象上调用requestUpdate
。
任何更好和更好的建议将不胜感激!
解决方法
这是新的 ReactiveController
可以提供帮助的地方。这让您可以连接到组件生命周期,以便您的 API 可以告诉 LitElement
何时需要呈现:
import { ReactiveController,ReactiveControllerHost } from 'lit';
export class MyController
implements ReactiveController {
list = [];
constructor(private host: ReactiveControllerHost) {
host.addController(this);
}
private callbackIcons(loaded) {
this.list = loaded;
this.host.requestUpdate();
}
loadIcons(icons) {
API.myfunction(icons,items => this.callbackIcons(items));
}
}
然后在您的元素中:
import { LitElement,html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { MyController } from './my-controller.js';
@customElement('my-element')
class MyElement
extends LitElement {
private myController = new MyController(this);
render() {
const icons = this.myController.list.map(i => Iconify.renderSVG(i)) ;
return html`... ${icons} ...`;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。