@材质组件web无效选项卡组件作为activeTab提供

首先我要说的是，mdc文档对于像我这样的非专业人士来说很难

我在用长生不老药凤凰和早午餐。 我喜欢进口，一切都很好

import {MDCTab, MDCTabFoundation} from '@material/tabs'; import
{MDCTabBar, MDCTabBarFoundation} from '@material/tabs'; import
{MDCTabBarScroller, MDCTabBarScrollerFoundation} from
'@material/tabs';

我在导出的单独函数中手动实例化选项卡栏

export var Tabbable = {
  run: function(MDCTabBar, el){
    var myDynamicTabBar = window.myDynamicTabBar = new MDCTabBar(document.querySelector('#' + el));

下面是这样的文档

const tabBar = new MDCTabBar(document.querySelector('#my-mdc-tab-bar'));

但与文档在代码片段中使用选项卡栏略有不同

var dynamicTabBar = window.dynamicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#dynamic-tab-bar'));

但是，每当我尝试使用mdc时，就会出现“未定义”错误。因此，我没有使用它：-）

现在，当用户单击选项卡栏时，我捕捉到如下内容：

myDynamicTabBar.listen('MDCTabBar:change', function ({detail: tabs}) {
  var nthChildIndex = tabs.activeTabIndex;
  updatePanel(nthChildIndex);
});

微妙的区别在于我的myDynamicTabBar是mdctabar，而文档的dynamicTabBar是mdc.tabs.mdctabar

我的选项卡控件正常工作，但它抛出一个仅在控制台中可见的错误：

未捕获错误：作为activeTab指定的tab组件无效：tab不是 在此组件的选项卡列表中找到

这可能是因为我没有使用

mdc.tabs

？文档记录了MDCTabBar上发生的更改事件

因此，如何在控制台中消除这个恼人的错误

为什么我不能访问全球mdc？我在早午餐档案里试过这个

globals: { mdc: "@material"}

---

但是不行。

在这件事上我支持你！我也对这些文件感到失望：(

---

你回答了自己的问题，内容非常丰富。

我支持你！我对这些文件也很失望：(

---

您回答了自己的问题，内容非常丰富。

我在这篇文章中找到了真正的解决方案 MDCTabBar会自动启动其子项。因此，启动选项卡将导致该错误。

---

修复方法是只启动MDCTabBar

我在这个线程中找到了真正的解决方案 MDCTabBar会自动启动其子项。因此，启动选项卡将导致该错误。 解决方法是只启动mdctabar