Что делает класс is-upgrade в material-design-lite и как он устанавливается?

Я реализую Material Design с помощью Material-Design-lite в приложении React. Когда я использую TextField с плавающей меткой в ​​моем верхнем компоненте, это работает. Но для компонента, вызываемого верхним компонентом, это не так. Затем TextField с плавающей меткой действует как обычное поле ввода.

Я заметил, что внешний TextField получает класс с именем is-upgrade, а внутренний 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>
    )
  }
}

Продукты.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>


material-design-lite
person Dan    schedule 10.07.2015    source источник

Ответы (1)


arrow_upward
10
arrow_downward

MDL улучшает обычные элементы DOM, обновляя их до компонентов MDL. В случае нединамических элементов (то есть всего, что уже есть в дереве DOM на момент window.load), MDL автоматически обновляет их на window.load до компонентов MDL. Для всего остального вы должны использовать componentHandler для обновления своих элементов вручную. Здесь есть статья, в которой объясняется, как интегрировать React с леями:

Интегрировать MDL с React так же просто, как вызвать единственный метод: 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");
     */
  }
});

Отказ от ответственности: я являюсь автором вышеупомянутой статьи!

person Yan Foto    schedule 11.07.2015
comment
Спасибо. Это отличная статья, в которой объясняется, как MDL реализуется с помощью React. - person Dan; 11.07.2015
comment
@user3846507 пожалуйста :) Очень рад, что статья оказалась полезной! - person Yan Foto; 11.07.2015