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

比眉伴天荒 2022-06-12 07:43 188阅读 0赞

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传递过来。