用NProgress组件代替withNProgress钩子函数

用NProgress组件代替withNProgress钩子函数

之前提到过withNProgress钩子函数的用法，用NProgress组件也可以实现相同的方法，组件需要传递一个参数isAnimating，children组件有三个默认的参数animationDuration，isFinished，progress，这几个参数的用法和withNProgress里名称相同且功能一致。改写案例：

App.js里

import './index.css'

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

import Progress from './Progress'

const App = () => {
 const [state, setState] = useState({
   isAnimating: false,
 })

 console.log(state)

 return (
   <>
     <Progress isAnimating={state.isAnimating} />
     <button
       onClick={() => {
         setState((prevState) => ({
           isAnimating: !prevState.isAnimating,
         }))
       }}
     >
       {state.isAnimating ? 'Stop' : 'Start'}
     </button>
   </>
 )
}

export default App

Progress.js

import { NProgress } from '@tanem/react-nprogress'
import React from 'react'

const What = ({ isAnimating }) => {
    return (
        <div>
            <NProgress isAnimating={isAnimating}>
                {
                    ({ animationDuration, isFinished, progress }) => {
                        return (
                            <div>
                                <p>isFinished:{String(isFinished)}</p>
                                <p>progress:{progress}</p>
                                <p>animationDuration:{animationDuration}</p>
                            </div>
                        )
                    }
                }
            </NProgress>
        </div>
      )    
}

export default What

最终输出结果不变