ReactJsで簡単なアコーディオンメニューの効果を書きます.
8532 ワード
ReactJsは、Virtual DOMを利用する以外に、ページのレンダリング速度を大幅に向上させました.
コンポーネントベースのコード方式も優雅で、コンポーネントの階層構造がはっきりしていて、メンテナンスしやすいです.
以下はReactJsで簡単なアコーディオンメニューの効果を書いて、学習交流だけに提供します.
ソースは以下の通りです.
コンポーネントベースのコード方式も優雅で、コンポーネントの階層構造がはっきりしていて、メンテナンスしやすいです.
以下はReactJsで簡単なアコーディオンメニューの効果を書いて、学習交流だけに提供します.
ソースは以下の通りです.
<html>
<head>
<meta charset="UTF-8" />
<title>title>
<script src="https://npmcdn.com/[email protected]/dist/react.js">script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.js">script>
<script src="https://npmcdn.com/[email protected]/browser.min.js">script>
<style type="text/css">
.hidden{
display:none;
}
style>
head>
<body>
<div id="myComponent">div>
<script type="text/babel">
//
var menuDatas = [
{id:"010", label:"ANIMAL", children:[
{id:"011", label:"dog"},
{id:"012", label:"cat"},
{id:"013", label:"bird"}
]},
{id:"020", label:"TRAFFIC", children:[
{id:"021", label:"car"},
{id:"022", label:"bus"},
{id:"023", label:"plane"}
]},
{id:"030", label:"MOBILE", children:[
{id:"031", label:"ipone"},
{id:"032", label:"smartisan"}
]}
];
// React
var ReactMenus = React.createClass({
getInitialState : function(){
return {expandId : -1};
},
clickHandler : function(menuDataId){
this.setState({ expandId: menuDataId});
},
render :function(){
// ，
var crtCmp = this;
// ， Virtual DOM
var menusDataDom = this.props.menuDatas.map(function(crtMenuData){
// ， Virtual DOM --> ，
var liData = null;
if(crtMenuData.children){
liData = crtMenuData.children.map(function(currentLiData){
return (
<li key={currentLiData.id} className={crtMenuData.id==crtCmp.state.expandId?"":"hidden"}>
{currentLiData.label}
li>
)
});
liData = <ul>{liData}ul>
}
// Virtual DOM
return (
<div key={crtMenuData.id}>
<div onClick={crtCmp.clickHandler.bind(crtCmp,crtMenuData.id)}>{crtMenuData.label}div>
{liData?liData:""}
div>
);
})
return (
<div>{menusDataDom}div>
)
}
});
// DOM
ReactDOM.render(<ReactMenus menuDatas={menuDatas} /> , document.getElementById("myComponent"));
script>
body>
html>