我使用 stencil.js 創(chuàng)建了一個(gè)簡單的目錄項(xiàng)組件。在組件中有一個(gè)畫布標(biāo)簽，我在其上繪制了動(dòng)畫曲線。在 componentDidLoad 函數(shù)中，我定義了畫布，對其進(jìn)行初始化并調(diào)用 animate 函數(shù)。這是組件本身的代碼：import { Component, Host, h, Prop, Element  } from "@stencil/core";import { Item } from "../hotb-catalog-container/data";import { initCanvas, init, animate } from "./wave.js";import axios from "axios";@Component({  tag: "hotb-catalog-item",  styleUrl: "hotb-catalog-item.scss",  shadow: false,})export class HotbCatalogItem {  @Prop() item: Item;  @Element() el: HTMLElement;  // @Event({ bubbles: true, composed: true }) itemSelect: EventEmitter<Item>;  itemSelected(event: Event) {    event.preventDefault();    //sessionStorage.setItem("item", JSON.stringify(this.item));    axios.post("/item", { item: this.item }).then(() => {      window.location.href = "http://localhost:3000/item";    });  }  componentDidLoad() {    let canvas = this.el.querySelector('canvas');    initCanvas(canvas);    init();    animate();  }  render() {    return (      <Host>        <div class="heading">          <h1>{this.item.name}</h1>          <span> ?{this.item.origin} &#183; {this.item.taste}</span>        </div>        <div class="center-part">          <div class="center-part__img"></div>          <div class="center-part__icon center-part__icon--temp">            {this.item.temp}&deg;C          </div>          <div class="center-part__icon center-part__icon--time">            {this.item.time}          </div>        </div>        <a          href="/item"          onClick={this.itemSelected.bind(this)}          class="primary-btn homepage__tea"        >          ?????        </a>        <canvas></canvas>      </Host>    );  }}最終結(jié)果是組件顯示畫布和線條，但動(dòng)畫僅在其中之一中發(fā)生。其余的在初始狀態(tài)下是靜態(tài)的。請告訴我為什么會(huì)發(fā)生這種情況以及我可以采取哪些措施來修復(fù)它，以便所有組件都可以動(dòng)畫化。需要注意的是，當(dāng)我刷新代碼并且瀏覽器通過熱重載刷新時(shí)，另一個(gè)組件會(huì)在每次刷新時(shí)啟動(dòng)動(dòng)畫，依此類推。