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' // 引入Reactimport { connect } from 'react-redux' // 引入connectimport DropItem from '../components/DropItem'  // 引入展示组件Listconst 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传递过来。