react项目实战（权限模块开发四） SkinDropDown插件开发

login.js文件中用到了一个SkinDropDwon插件

import SkinDropCom from '../../components/SkinDropCom';

...
<SkinDropCom skinsList={loginMd.skinsList} visibility={loginMd.visibility}
changeCurSkin={this._changeCurSkin} showDropDown={this._showDropDown} width="180px"/>
...

SkinDropCom代码如下:

import React, { Component, PropTypes } from 'react' // 引入React
import { connect } from 'react-redux' // 引入connect
import DropItem from '../components/DropItem'  // 引入展示组件List

const dropDowStyle = (visibility, width)=> {
return {
visibility: visibility,
width: width
}
}

class SkinDropCom extends Component {
constructor(...props) {
super(...props);
[
'_onClickHandler'
].forEach(func=> {
this[func] = this[func].bind(this);
});
}

componentDidMount() {
document.body.addEventListener('click', this._onClickHandler, false);
}

componentWillUnmount() {
document.body.removeEventListener('click');
}

_onClickHandler(e) {
const { showDropDown }=this.props;
showDropDown(false);
}

render() {
// 通过this.props获取到lists的值
const { skinsList, visibility,changeCurSkin,width } = this.props;

var getItemProps=(itemObj, changeCurSkin, index)=>{
return {
itemId: itemObj.itemId,
key: index,
changeCurSkin: changeCurSkin,
text: itemObj.text
}
}

return (
<div className="dhxcombolist_material" style={dropDowStyle(visibility,width)}>
{ skinsList.map((itemObj, index) =>
<DropItem {...getItemProps(itemObj, changeCurSkin, index)}></DropItem>
)}
</div>
)
}
}

export default SkinDropCom;

该组件又用到一个无状态的插件DropItem：

<div className="dhxcombolist_material" style={dropDowStyle(visibility,width)}>
{ skinsList.map((itemObj, index) =>
<DropItem {...getItemProps(itemObj, changeCurSkin, index)}></DropItem>
)}
</div>

DropItem.js文件内容如下：

// 动态数据列表
import React, {PropTypes} from 'react'

export default function DropItem({itemId,text,changeCurSkin}){
return (
<div className="dhxcombo_option" id={itemId} onClick={(ev)=>{
ev.stopPropagation();
changeCurSkin(text);
}}>
<div className="dhxcombo_option_text">{text}</div>
</div>
)
}

DropItem.propTypes = {
itemId: PropTypes.string.isRequired,
text: PropTypes.string.isRequired
}

该组件对document.body进行了一个事件注册，目的是点击界面其他地方可以将下拉隐藏掉，该事件需要从父界面login传递过来。