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

最新推荐文章于 2024-12-20 16:00:00 发布

飞天代码

最新推荐文章于 2024-12-20 16:00:00 发布

阅读量641

点赞数

CC 4.0 BY-SA版权

分类专栏： react项目实战

本文链接：https://blog.youkuaiyun.com/weiyongliang_813/article/details/75353917

react项目实战专栏收录该内容

9 篇文章

订阅专栏

本文介绍了login.js中使用的SkinDropCom插件及其子组件DropItem的实现细节。SkinDropCom是一个可配置皮肤的下拉选择插件，利用React及React-Redux进行组件构建，并通过document.body事件监听实现交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
}