React hooks

classname绑定

<div className={ this.state.isShow ? 'box-color' : `${'box-color'} ${'box-hide'}`}>
<!--多个判断-->
<div className={ [data === 1 ? 'box-color' : `${'box-color'} ${'box-hide'}` ,
data2 ===2 ? '' : ''].join.()}>

监听窗口滚动

import React, { useState ,useEffect ,useCallback } from 'react';

function useWinSize(){
    const [ height , setHeight] = useState(
        document.documentElement.clientWidth,
    )

    const onResize = useCallback(()=>{
        setHeight(
            document.documentElement.scrollTop ,
        )
    },[]) 
    useEffect(()=>{
        window.addEventListener('scroll',onResize)
        return ()=>{
            window.removeEventListener('scroll',onResize)
        }
    },[])

    return height;
}
export default useWinSize;

父子组件传参

• 父组件createContext

import React, { useEffect, useState, createContext } from 'react';
<!-- 引入createContext-->
export const CountContext = createContext()

<!--包裹子组件-->
 <CountContext.Provider value={list}>
         <List />
 </CountContext.Provider>

• 子组件useContext

import React, { useContext } from 'react';
<!--引入父组件中的CountContext-->
import {CountContext} from '../App'
let list = useContext(CountContext)

二级路由配置

• 总路由

<Router>
	<Route path="/" exact component={app} />
	<Route path="/details/:id" exact component={Index} />
</Router>

• app页面路由

<div>
    <Route path="/" exact  component={Index} />
    <Route path="/index" exact  component={Index} />
    <Route path="/details/:id" exact  component={Details} />
    <Route path="/details" exact  component={Details} />
</div>

路由切换滚动到顶部

window.scrollTo(0,0)