材料组件 Web 和 React：无法读取未定义的属性“querySelector”；

Posted 2023-02-22

【中文标题】材料组件 Web 和 React：无法读取未定义的属性“querySelector”；

【英文标题】：Material Components Web and React: Cannot read property 'querySelector' of undefined;

【发布时间】：2018-03-24 02:20:21

【问题描述】：

我正在尝试利用 React 和 Material Components Web 构建一个 Modal 组件。 Modal 的可见性是作为 props 从父 state 继承而来的：

import React, Component from 'react';
import MDCFormField from '@material/form-field/';
import MDCTextfield from '@material/textfield/';
import './modal.scss';

export default class Modal extends Component 

  componentDidMount() 
  this.email = new MDCTextfield(this.email);
  this.pwd = new MDCTextfield(this.pwd);


  componentWillUnmount() 
    this.email.destroy();
    this.pwd.destroy();
  

  render() 
    if (this.props.isModalOpen)
      return (
        <div id="modal-container">
          <div id="mask"></div>
          <div id="modal">
            <form className="mdc-form-field">

              <div ref=(div) => this.email = div className="mdc-textfield">
                <label type="email" htmlFor="email" className="mdc-textfield__label">Your email</label>
                <input type="text" id="email" className="mdc-textfield__input"/>
                <div className="mdc-textfield__bottom-line"></div>
              </div>

              <div ref=(div) => this.pwd = div className="mdc-textfield">
                <label htmlFor="pw" className="mdc-textfield__label">Password</label>
                <input type="password" id="pw" className="mdc-textfield__input" required minLength=8/>
                <div className="mdc-textfield__bottom-line"></div>
              </div>

            </form>
          </div>
        </div>
      );
     else 
      return null
    
  

一旦应用初始化，就会出现错误“TypeError: Cannot read property 'querySelector' of undefined”

当然，因为模态返回 null。

所以我尝试将材质组件初始化为

componentDidMount() 
    this.email = this.email && new MDCTextfield(this.email);
    this.pwd = this.pwd && new MDCTextfield(this.pwd);
   

在这种情况下，不再抛出错误，但显然组件没有初始化。

我没有想出一个模式来解决这个问题。还有一种 css 方法也不起作用（想法是从主容器切换 .someClass display: none ）。

/** 已解决 **/

好的，我想出了一个解决问题的工作模式。 问题出在应用的架构上，组件的封装不合适。

这是一个名为 Modal 的父组件：

import React, Component from 'react';
import EmailField from './email-field';
import PwdField from './password-field';
import './modal.scss';

export default class Modal extends Component 

  render() 
    if (this.props.isModalOpen)
      return (
        <div id="modal-container">
          <div id="mask"></div>
          <div id="modal">
              <form className="mdc-form-field">
                <EmailField />
                <PwdField />
              </form>
          </div>
        </div>
      );
     else 
      return null
    
  

比我们有子组件

import React, Component from 'react'
import MDCTextfield from '@material/textfield/';

export default class EmailField extends Component 

  componentDidMount()
    this.email = new MDCTextfield(this.email);
  

  componentWillUnmount()
    this.email.destroy();
  

  render()
    return(
        <div ref=(div) => this.email = div className="mdc-textfield">
          <label type="email" htmlFor="email" className="mdc-textfield__label">Your email</label>
          <input type="text" id="email" className="mdc-textfield__input"/>
          <div className="mdc-textfield__bottom-line"></div>
        </div>
    );
  

我试图从不同范围的 MDCTextfield 元素中初始化和销毁​​。

【问题讨论】：

能分享一下你用的是哪个素材库吗？

直截了当的“纱线添加材料-组件-网”

这会帮助你github.com/material-components/material-components-web

您还必须在 index.html 中插入此处标识的一些脚本。请参阅上面的链接。

【参考方案1】：

你应该试试这个库的react version。

【讨论】：

感谢 Fawaz，但我收到此错误“没有'new'就无法调用类构造函数 MDCTextfield”。如果我硬编辑父状态（isModalOpen = true），一切都会按预期工作。

@TheBluerock 我认为您应该尝试一些经过更多测试的东西才能与 React 一起正常工作。也许我更新的答案会更好地帮助你！

【参考方案2】：

尝试控制台.log(this.email)。之后您会看到，您尝试传递的 ref 不是选择器，这在您初始化材料组件时是预期的。 @Fawaz 答案是正确的，但您可以按照自己的方式实例化它，即使在 div 上也是如此。

展示：https://www.webpackbin.com/bins/-KwEsyJR3O3eW50gX2pq

你使用的组件和我一样吗？

将此作为参考： Material Components Textfield, Manual Instantiation

【讨论】：

console.log(this.email) 输出 MDCTextfield 对象及其基础中描述的所有属性。

那么你可以使用这个对象，或者使用 react 版本，如 @Fawaz