5

React アプリで Material-Design-lite を使用してマテリアル デザインを実装しています。トップコンポーネント内でフローティングラベル付きのTextFieldを使用している場合、機能します。しかし、最上位コンポーネントによって呼び出されたコンポーネントでは、そうではありません。TextField w/Floating Label は、通常の入力フィールドとして機能します。

外側の 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>

4

1 に答える 1

10

MDL は、通常の DOM 要素を MDL コンポーネントにアップグレードすることで強化します。非動的要素 (つまり、DOM ツリーに既に存在するすべてのもの) の場合、MDL はそれらを MDL コンポーネントwindow.loadに自動的にアップグレードします。要素を手動でアップグレードするために使用する必要がwindow.loadあるその他すべてについて。React と MDL を統合する方法を説明する記事がここにあります。 componentHandler

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 に答える