material-design-lite中的「升級」類是什麼？它是如何設置的？

我在React應用程序中使用Material-Design-lite實施Material Design。當我在頂層組件中使用帶有浮動標籤的TextField時，它可以工作。但是在頂級組件調用的組件上，它並不是。帶有浮動標籤的TextField將作爲常規輸入字段。material-design-lite中的「升級」類是什麼？它是如何設置的？

我注意到外層TextField得到一個名爲「is-upgraded」的類，但內層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>

來源

2015-07-10 Dan

MDL增強由正常DOM元素升級他們MDL組件。在非動態元素的情況下（即，在window.load之後已經在DOM樹中的所有東西），MDL自動將它們升級到window.load到MDL組件。對於其他所有內容you have to usecomponentHandler手動升級您的元素。有作爲article here這也解釋瞭如何整合與MDL陣營：

集成MDL與之反應就像調用一個方法一樣容易： componentHandler.upgradeDom();。在我看來，這個代碼最好的地方在componentDidUpdate的回調函數中，在元素被更新併成功呈現之後，這個回調函數只調用。這樣我們可以確保我們的React組件已經存在於DOM 中，並且可以通過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"); 
    */ 
    } 
});

免責聲明：我上述文章的作者！

來源

2015-07-11 10:15:22

謝謝。這篇文章解釋瞭如何使用React實現MDL。 – Dan

@ user3846507非常歡迎:)我真的很高興文章可能會有所幫助！ –

material-design-lite中的「升級」類是什麼？它是如何設置的？

回答

相關問題