Question

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

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

一旦应用程序初始化，就会出现错误＆＃34; TypeError：无法读取属性＆＃39; querySelector＆＃39;未定义的“

当然，自从Modal返回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元素初始化和销毁。

Answer 1

您应该试用此库的react version。

Answer 2

尝试console.log（this.email）。之后您将看到，您尝试传递的参考不是选择器，当您初始化matertial-components时，这是预期的。 @Fawaz 答案是正确的，但您可以按照自己想要的方式对其进行实例化，即使在div上也是如此。

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

您是否使用了我在那里使用的组件？

使用此参考： Material Components Textfield, Manual Instantiation

材料组件Web和React：无法读取属性＆＃39; querySelector＆＃39;未定义的;

2 个答案: