22.react项目练手

Posted on

1.小问题

1
2
3
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>
    
由于目标被当作被动事件监听器，无法防止被动事件监听器中的默认值。看到< URL >
1
2
3
body{
   touch-action: none;
 }

2.路由使用

1
2
3
4
5
6
7
8
9
10
11
12
import { withRouter } from 'react-router-dom'

this.props.history.push("/")

export default withRouter (RTab);

<HashRouter>
      <RNav></RNav>
      <RouterMap></RouterMap>
      <Button type='primary'>按钮</Button>
      <RTab></RTab>  
</HashRouter>

3.路由传值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//  1. 导入get的方法
import {fetchget,fetchpost} from '../../untils/myfetch.js'

// 2. 获取数据
async componentDidMount() {
        // 获取广告数据
        const result =await fetchget('/api/homead')
        this.setState({
            ads: result
        })
    }

// 3. 传值
 <Ad ads={this.state.ads}></Ad>

// 4. 渲染到页面上
<div className="ad-container clear-fix">
      {this.props.ads.map((item, index) => {
            return <div key={index} className="ad-item float-left">
               <a href={item.link} target="_blank">
                     <img src={require(item.img+'')} alt={item.title}/>
               </a>
         </div>
     })}
</div>

拓展

  1. 根据 ads 的长度进行判断是否加载
  2. 导入 ActivityIndicator 组件
1
2
3
4
5
6
7
8
import {ActivityIndicator} from 'antd-mobile'

{
         //传递数据给子组件
         this.state.ads.length
          ? <Ad ads={this.state.ads}/>
         : <ActivityIndicator text="loading..."/>
}