MDC 自动实例化答案

【问题标题】：MDC Automatic InstantiationMDC 自动实例化
【发布时间】：2026-01-28 19:25:01
【问题描述】：

我目前正在使用“手动实例化”方法，效果很好。我注意到“自动实例化”方法，但无法让它工作。使用这种方法究竟需要什么？

当我使用代码时：

mdc.tabs.MDCTabBar.attachTo(document.querySelector('#my-mdc-tab-bar'));

我收到错误日志记录： “未捕获的 ReferenceError：未定义 mdc”。

参考这里： https://github.com/material-components/material-components-web/tree/master/packages/mdc-tabs#automatic-instantiation

谢谢。

【问题讨论】：

标签： mdc-components

【解决方案1】：

Material Components Web Docs - Auto Init

mdc-auto-init 是一个提供声明性的实用程序包，基于DOM的简单MDC Web组件初始化方法网站。请注意，对于更高级的用例和复杂的站点，组件的手动实例化将为您提供更大的灵活性。但是，mdc-auto-init 非常适合静态网站、原型和其他最适合简单和方便的用例。

当mdc-auto-init 将组件附加到元素时，它会使用名称为data-mdc-auto-init 的值的属性将该实例分配给元素。例如，给定

<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
    <input class="mdc-text-field__input" type="text" id="input">
    <label for="input" class="mdc-floating-label">Input Label</label>
    <div class="mdc-line-ripple"></div>
</div>

<!-- at the bottom of the page -->
<script type="text/javascript">
    window.mdc.autoInit();
</script>

一旦调用mdc.autoInit()，您就可以通过该元素上的 MDCTextField 属性访问组件实例。

【讨论】：

除了你的答案：如果它是一个选择字段，用<div class="mdc-select" data-mdc-auto-init="MDCSelect">自动初始化它

【解决方案2】：

我只需要简单地添加整个 javascript 文件 MDC 包。

<script src="https://unpkg.com/material-components-web@0.36.1/dist/material-components-web.min.js"></script>

只有这样才是 mdc。与自动初始化一起定义和使用。

【讨论】：