Reactjs 物料组件Web和React：无法读取属性'；查询选择器'；未定义的；

我试图利用React和Material Components Web构建一个模态组件。模态的可见性作为道具从父状态继承：

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
    }
  }
}

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

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

/**解决**/

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

这是一个称为模态的父组件：

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}来自'React'；
从“./电子邮件字段”导入电子邮件字段；
从“./密码字段”导入PWD字段；
导入“/modal.scss”；
导出默认类模式扩展组件{
render（）{
if（this.props.isModalOpen）{
返回(
);
}否则{
返回空
}
}
}

比我们有孩子更重要

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>
    );
  }
}

import React，{Component}来自“React”
从'@material/textfield/'导入{MDCTextfield}；
导出默认类EmailField扩展组件{
componentDidMount（）{
this.email=新的MDCTextfield（this.email）；
}
组件将卸载（）{
this.email.destroy（）；
}
render（）{
返回(
{this.email=div}}className=“mdc textfield”>
你的电子邮件
);
}
}

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

您应该尝试使用此库的

尝试console.log（this.email）。之后，您将看到，您尝试传递的ref不是选择器，这在初始化材质组件时是应该的。 @Fawaz的答案是正确的，但您可以按照自己的方式实例化它，即使是在

div

上

展示：

你使用的组件和我在那里使用的一样吗

请参考：

---

您能分享您正在使用的材料库吗？一个简单的“纱线添加材料组件网站”这将帮助您还必须在index.html中插入一些在此处标识的脚本。请参阅上面的链接。谢谢Fawaz，但我遇到了一个错误“类构造函数MDCTextfield在没有“new”的情况下无法调用”。如果我硬编辑父状态（isModalOpen=true），一切都会按预期工作。@BlueRock我想你应该尝试一些更经过测试的方法，以使React正常工作。也许我最新的答案会帮助你更好！控制台.log（这个.email）输出具有他基金会中描述的所有属性的MdTraceFieldObjor。然后可以使用这个对象，或者使用Read版本，如@ Fawaz所述。

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>
    );
  }
}