zoukankan      html  css  js  c++  java
  • 初步学习next.js-5-编写css样式和lazyloading

    CSS

    import React, {useState} from 'react'
    
    function Jspang(){
        //关键代码----------start-------
        const [color,setColor] = useState('blue')
    
        const changeColor=()=>{
    
            setColor(color=='blue'?'red':'blue')
        }
         //关键代码----------end-------
    
        return (
            <>
                <div>技术胖免费前端教程</div>
                <div><button onClick={changeColor}>改变颜色</button></div>
                <style jsx>
                    {`
                        div { color:${color};}
                    `}
                </style>
            </>
        )
    }
    export default Jspang

    懒加载

      懒加载模块

     

    import React, {useState} from 'react'
    //删除import moment
    function Time(){
    
        const [nowTime,setTime] = useState(Date.now())
    
        const changeTime= async ()=>{ //把方法变成异步模式
            const moment = await import('moment') //等待moment加载完成
            setTime(moment.default(Date.now()).format()) //注意使用defalut
        }
        return (
            <>
                <div>显示时间为:{nowTime}</div>
                <div><button onClick={changeTime}>改变时间格式</button></div>
            </>
        )
    }
    export default Time

      懒加载组件

    export default ()=><div>Lazy Loading Component</div>
    import React, {useState} from 'react'
    import dynamic from 'next/dynamic'
    
    const One = dynamic(import('../components/one'))
    
    function Time(){
    
        const [nowTime,setTime] = useState(Date.now())
    
        const changeTime= async ()=>{
            const moment = await import('moment')
    
            setTime(moment.default(Date.now()).format())
        }
        return (
            <>
                <div>显示时间为:{nowTime}</div>
                <One/>
                <div><button onClick={changeTime}>改变时间格式</button></div>
            </>
        )
    }
    export default Time
  • 相关阅读:
    来电科技-自助租借充电宝
    一次使用NodeJS实现网页爬虫记
    八爪鱼采集器
    杭州市职称系统
    zz
    有道智选-网易效果推广
    Ubuntu10.04下载并编译Android4.3源代码
    poj 1654 Area 多边形面积
    Android利用Looper在子线程中改变UI
    Notepad 快捷键 大全
  • 原文地址:https://www.cnblogs.com/lxz-blogs/p/13152017.html
Copyright © 2011-2022 走看看