# yang-ping

**Repository Path**: wwwKit/yang-ping

## Basic Information

- **Project Name**: yang-ping
- **Description**: （前端）基于react开发的仿boss直聘网站
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-04-16
- **Last Updated**: 2021-04-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

项目描述

# 1.遇到的问题   

## 使用css module

​	因为我使用ant mobile  它已经帮我配好了，我只需要将我原本要引入的文件`nav.less`  修改成`nav.module.less`即可

然后通过如下引用方式代替  `import from './nav.less'`

```react
import cssModule from './nav.module.less'

class Nav extends Component {
    render() {
        return (
            <div className={cssModule.box}></div>
        );
    }
}
```

## 普通类名和 css module混合使用

```react
import React, {Component} from 'react';
import cssModule from './nav.module.less'

class Nav extends Component {
    render() {
        return (
            <div className={cssModule.box}>
                <i className={`iconfont ${cssModule.iconfont}`} >&#xe81a;</i>
                <i className={`iconfont ${cssModule.iconfont}`}>&#xe81b;</i>
            </div>
        );
    }
}

export default Nav;
```

## ant mobile 添加tarbar后点击事件都失效了

细心的化就能直接发现 添加的tarbar之后 它的高度默认是100%，而且它层级还高，覆盖掉了其他页面



## 关于一个列表栏要实现可长按、可单点、滑动不影响的事件封装

```js
let timers = null;  // 防抖
let touchType = 'shortTouch';   // 触摸类型是长按还是短按
let toUrl = ''; // 要跳转的url
let isTouchmoveing = false; // 是否move中（用于判断是否执行单点操作）

class ChatItem extends Component {
    onTouchStart = (e, url) => {
        toUrl = url;
        if (timers) return
        timers = setTimeout(() => {
            clearTimeout(timers)
            timers = null
            touchType = "longTouch"
            console.log('1321')
            Modal.alert('提示!', '是否删除该聊天?', [
                {text: '取消', onPress: () => console.log('cancel')},
                {
                    text: '确定',
                    onPress: () =>
                        new Promise((resolve) => {
                            Toast.info('onPress Promise', 1);
                            setTimeout(resolve, 1000);
                        }),
                },
            ])
        }, 1000)
    }

    onTouchMove(e) {
        isTouchmoveing = true
        if (!timers) return   // 节流操作

        //  长按下一移动就取消长按效果
        clearTimeout(timers)
        timers = null
    }

    onTouchEnd = (e) => {
        if (touchType === 'shortTouch' && !isTouchmoveing) {
            console.log('我是单点击')
            this.props.history.push(toUrl)
        } else if (touchType === 'longTouch') {
            console.log('我是长按')
        }


        e.preventDefault();
        clearTimeout(timers)
        // 复原初始化数据
        timers = null
        touchType = 'shortTouch'
        toUrl = ""
        isTouchmoveing = false
    }

    render() {
        return (
            <div className='Item noSel'
                 onTouchStart={(e) => this.onTouchStart(e, '/ChatInterface')}
                 onTouchMove={(e) => this.onTouchMove(e)}
                 onTouchEnd={this.onTouchEnd}>
                666666666666666666666666666666666666666666666666666666666666666666666666
            </div>
        );
    }
}


export default withRouter(ChatItem);
```

## 自定义组件使用点击事件

自定义组件的外层是无法设置点击事件的，因为它不是一个dom元素

可以在外部传参给内部组件，在内部组件执行点击事件

```react
// 父组件

import React, {Component} from 'react';

import {WhiteSpace} from 'antd-mobile';

import PostCardItem from "../../../components/PostCardItem/PostCardItem";
class SwiperFullTime extends Component {
    state = {
        options:{
            ToUrl:"/PostDetail"
        }
    }
    render() {
        return (
            <div>
                <PostCardItem options={this.state.options}/><WhiteSpace size="sm"/>
                <PostCardItem options={this.state.options}/><WhiteSpace size="sm"/>
                <PostCardItem options={this.state.options}/><WhiteSpace size="sm"/>
                <PostCardItem options={this.state.options}/><WhiteSpace size="sm"/>
                <PostCardItem options={this.state.options}/><WhiteSpace size="sm"/>
                <PostCardItem options={this.state.options}/><WhiteSpace size="sm"/>
                <PostCardItem options={this.state.options}/><WhiteSpace size="sm"/>
                <PostCardItem options={this.state.options}/><WhiteSpace size="sm"/>
                <PostCardItem options={this.state.options}/><WhiteSpace size="sm"/>
                <PostCardItem options={this.state.options}/><WhiteSpace size="sm"/>
                <PostCardItem options={this.state.options}/><WhiteSpace size="sm"/>
                <PostCardItem options={this.state.options}/><WhiteSpace size="sm"/>
                <PostCardItem options={this.state.options}/><WhiteSpace size="sm"/>
                <PostCardItem options={this.state.options}/><WhiteSpace size="sm"/>
            </div>
        );
    }
}
export default SwiperFullTime;
```



```react
//子组件

import React, {Component} from 'react';
import PropTypes from 'prop-types'  // 组件传参用的参数校验
import {withRouter} from 'react-router-dom'  // 作用：非路由组件取path值

class PostCardItem extends Component {
	static propTypes = {
        options: PropTypes.object
    }
    onGoTo = (url) => this.props.history.push(url)
    render() {
        let {ToUrl} = this.props.options
        return (
        	<div className='flex flex-col bg-White padd20' onClick={() => this.onGoTo(`${ToUrl}`)}/>
        )
    }
	
}
```

```
158 9202 3484
```

# quick 复制

```js
import {withRouter} from 'react-router-dom'  // 作用：非路由组件取path值
```

```js
import PropTypes from 'prop-types'  // 组件传参用的参数校验

static propTypes = {
    TarBarList: PropTypes.array.isRequired,
    IsHideTatbar:PropTypes.bool.isRequired
}
```