5

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

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

应用结构

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

应用程序.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>
    )
   }
}

索引.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>

4

1 回答 1

10

MDL 通过将普通 DOM 元素升级为 MDL 组件来增强它们。在非动态元素的情况下（即 DOM 树中已经存在的所有内容window.load），MDL 会自动将它们升级window.load为 MDL 组件。对于您必须使用 componentHandler手动升级元素的所有其他内容。这里有一篇文章解释了如何将 React 与 MDL 集成：

将 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");
     */
  }
});

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

于 2015-07-11T10:15:22.457 回答