Dan*_*Dan 4 material-design-lite
我正在React应用程序中使用Material-Design-lite实现Material Design.当我在我的顶级组件中使用带有浮动标签的TextField时,它可以工作.但是在顶级组件调用的组件上,它没有.具有浮动标签的TextField然后作为常规输入字段.
我注意到外部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>
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");
*/
}
});
免责声明:我是上述文章的作者!
| 归档时间： |
|
| 查看次数： |
4510 次 |
| 最近记录： |