node.js - 导入 MDC Switch 组件时出现“无法读取未定义的属性‘MDCSwitch’”错误

Question

我正在使用 express 和 material-components-web 编写一个 Node 应用程序，我遇到了 TextField 可以工作但 Switch 不能工作的问题。

这是我用来将相关 JS 附加到元素的代码：

  [].slice.call(document.querySelectorAll('.mdc-text-field')).forEach(
  function(ele) {
    mdc.textField.MDCTextField.attachTo(ele);
  });

  [].slice.call(document.querySelectorAll('.mdc-switch')).forEach(
  function(ele) {
    mdc.switch.MDCSwitch.attachTo(ele);
  });

当我注释掉文本字段的代码时，它停止工作，所以这mdc.textField.MDCTextField部分肯定是工作的。

我在 Chrome 开发工具中遇到的错误是：

(index):446 Uncaught TypeError: Cannot read property 'MDCSwitch' of undefined
    at (index):446
    at Array.forEach (<anonymous>)
    at (index):444

我的 package.json 文件如下所示：

{
  "name": "emergencyregister",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {    
    "debug": "~2.6.9",
    "ejs": "^2.6.2",
    "eslint": "^5.7.0",
    "express": "^4.16.4",
    "helmet": "^3.20.0",
    "http-errors": "~1.6.2",
    "material-components-web": "^3.1.0",
    "mysql": "^2.16.0",
    "node-sass": "^4.12.0",
    "node-sass-middleware": "^0.11.0",
    "serve-favicon": "^2.5.0"
  },
  "devDependencies": {}
}

有任何想法吗？

Answer 1

原来我应该使用的代码是：

  [].slice.call(document.querySelectorAll('.mdc-switch')).forEach(
  function(ele) {
    mdc.switchControl.MDCSwitch.attachTo(ele);
  });

为了解决这个问题，我将 mdc 对象打印到控制台以查找所有不同的项目：

Answer 2

关于为什么它与其他的不同的一些历史。

switch是 JS 中的保留关键字，因此必须修改组件名称。