Question

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

我注意到外部TextField获取了一个名为＆＃34; is-upgraded＆＃34;的类，但内部TextField没有。

app结构

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组件。其他所有内容you have to use componentHandler手动升级您的元素。有一个article here解释了如何将React与MDL集成：

将MDL与React集成就像调用单个方法一样简单： componentHandler.upgradeDom();。在我看来，最好放的地方此代码位于componentDidUpdate回调中，仅调用此回调 after和element已更新并成功呈现。这条路我们可以确保我们的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");
     */
  }
});

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

什么课程＆＃34;升级＆＃34;在material-design-lite中做了什么以及如何设置？

1 个答案: