"Cannot read property 'MDCSwitch' of undefined" 导入 MDC Switch 组件时出错

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中的保留关键字，所以要修改组件名。

"Cannot read property 'MDCSwitch' of undefined" 导入 MDC Switch 组件时出错

"Cannot read property 'MDCSwitch' of undefined" error when importing an MDC Switch component

node.js

material-design

material-components-web