1

我刚刚从 stencil 0 更新到 1，并且在构建组件集合后出现此错误。

[ ERROR ]  TypeScript: ./src\components\layout\tabs\aep-tabs.tsx:24:5
       Type 'HTMLCollectionOf<Element>' is missing the following properties from type 'NodeList': forEach, entries,
       keys, values

 L23:  addTitleEvents() {
 L24:    this.tabTitleElements = this.tabs.getElementsByClassName('tab-title');
 L25:    [].forEach.call(this.tabTitleElements, (tab, pos) => {...

我的 aep-tabs.tsx 文件

import { Component, h, Listen, Element, State, Event, Method, EventEmitter } from '@stencil/core';

@Component({
  tag: 'aep-tabs',
  styleUrl: 'aep-tabs-style.scss'
})
export class AepTabs {
  @Element() tabs: HTMLElement;
  @State() initIndex: number = 0;
  @Event() tabClick: EventEmitter;
  private tabsElements;
  private tabsElementList: Array<any> = [];
  private tabTitleElements: NodeList; // <---- HERE

  componentWillLoad() {
    this.createTabsTitles(this.tabs.querySelectorAll('aep-tab'));
  }

  componentDidLoad() {
    this.addTitleEvents();
  }

  addTitleEvents() {

    // ERROR HERE 'this.tabTitleElements' is displaying the error message.
    this.tabTitleElements = this.tabs.getElementsByClassName('tab-title');
    [].forEach.call(this.tabTitleElements, (tab, pos) => {
      tab.addEventListener('click', () => {
        this.tabClick.emit(tab);
        this.activeTabs(pos);
      });
    });
    this.activeTabs(this.initIndex);
  }

  createTabsTitles(tabsList: NodeList) {
    this.tabsElements = tabsList;
    [].forEach.call(this.tabsElements, tab => {
      this.tabsElementList.push(
        <div class="tab-title" data-automation={tab.titletab.toString().toLowerCase()}>
          <span>{tab.titletab}</span>
        </div>
      );
    });
  }
  @Method()
  async activeTabs(index: number) {
    // ERROR HERE 'this.tabTitleElements' is displaying the error message
    this.tabTitleElements = this.tabs.getElementsByClassName('tab-title');
    [].forEach.call(this.tabTitleElements, (tab, pos) => {
      if (index === pos) {
        tab.classList.add('active');
        tab.classList.remove('inactive');
      } else {
        tab.classList.remove('active');
        tab.classList.add('inactive');
      }
    });

    [].forEach.call(this.tabsElements, (tab, pos) => {
      if (index === pos) {
        tab.classList.add('active');
        tab.classList.remove('inactive');
      } else {
        tab.classList.remove('active');
        tab.classList.add('inactive');
      }
    });
  }

  @Listen('clicktab')
  clicktabHandler(event: CustomEvent) {
    this.activeTabs(event.detail);
  }

  render() {
    return (
      <div class="aep-tabs">
        <nav>{this.tabsElementList}</nav>
        <div class="tab-container" data-automation="tab-container">
          <div class="tab-content">
            <slot />
          </div>
        </div>
      </div>
    );
  }
}

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "declaration": false,
    "experimentalDecorators": true,
    "allowJs": true,
    "lib": ["dom", "es7", "dom.iterable"],
    "moduleResolution": "node",
    "module": "esnext",
    "target": "es2017",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "jsx": "react",
    "jsxFactory": "h"
  },
  "include": ["src", "types/jsx.d.ts"],
  "exclude": ["node_modules"]
}

节点版本：10 TSC 版本：3.6.3

我已经更新了“lib”、“target”，我也将 nodeList 转换为一个数组，但它们都不起作用。有谁知道我该如何解决这个问题？

4

1 回答 1

1

您应该将您的代码替换getElementsByClassName为querySelectorAll

// this.tabTitleElements = this.tabs.getElementsByClassName('tab-title'); // change this
this.tabTitleElements = this.tabs.querySelectorAll('.tab-title');
于 2019-09-24T04:13:12.437 回答