material-design-lite 中的 class "is-upgraded" 有什么作用，它是如何设置的？

Question

我正在 React 应用程序中使用 Material-Design-lite 实现 Material 设计。当我在我的顶级组件中使用 TextField w/Floating 标签时，它可以工作。但是在顶级组件调用的组件上，它没有。 TextField w/Floating Label 然后充当常规输入字段。

我注意到外部 TextField 有一个名为 "is-upgraded" 的 class，但内部 TextField 没有。

应用结构

app.js
  products.js
    myTest.js (doesn't work)
  myTest.js (works)

App.jsx

export default class App extends React.Component {

  render() {
    return(
      <div>
        <Products/>
        <MyTest id="products" type="text"/>
      </div>
    )
  }
}

Products.jsx

export default class Products extends React.Component {

  render() {
    return(
      <div>
        <List items={this.state.products}/>
        <MyTest id="products" type="text"/>
        <AddProduct/>
      </div>
    )
  }
}

myTest.jsx

import React from "react";

export default class MyTest extends React.Component {
   constructor(props) {
    super(props)
  }

  render() {
    return(
      <div>
        <div className="mdl-textfield
                        mdl-js-textfield
                        mdl-textfield--floating-label">
          <input
            className="mdl-textfield__input"
            id={this.props.id}
            type={this.props.type}/>
          <label
            className="mdl-textfield__label"
            htmlFor={this.props.id}>
            Test
          </label>
        </div>
      </div>
    )
   }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <base href="/">
  <link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  <link href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <div id="app"></div>
  <script    src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js">    </script>
  <script src="http://localhost:8080/webpack-dev-server.js"></script>
  <script src="bundle.js"></script>

Answer 1

MDL 通过升级到 MDL 组件来增强普通 DOM 元素。对于非动态元素（即 window.load 上 DOM 树中已经存在的所有内容），MDL 会在 window.load 上自动将它们升级为 MDL 组件。对于解释如何将 React 与 MDL 集成的其他所有内容 you have to use componentHandler to upgrade your elements manually. There as an article here：

Integrating MDL with React is as easy as calling a single method: componentHandler.upgradeDom();. In my opinion, the best place to put this code is in the componentDidUpdate callback, which is invoked just after and element has been updated and successfully rendered. This way we can make sure that our React component already exists in the DOM and can be upgraded by the componentHandler.

所以你会得到这样的东西：

var TestButton = React.createClass({
  render: function() {
    return (
      <button ref="submit" className="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">
        Submit
      </button>
    );
  },
  componentDidUpdate: function() {
    // This upgrades all upgradable components (i.e. with 'mdl-js-*' class)
    componentHandler.upgradeDom();

    // We could have done this manually for each component
    /*
     * var submitButton = this.refs.submit.getDOMNode();
     * componentHandler.upgradeElement(submitButton, "MaterialButton");
     * componentHandler.upgradeElement(submitButton, "MaterialRipple");
     */
  }
});

免责声明：我是上述文章的作者！

material-design-lite 中的 class "is-upgraded" 有什么作用，它是如何设置的？

What does the class "is-upgraded" in material-design-lite do and how is it set?

material-design-lite