初步学习next.js-5-编写css样式和lazyloading
<p><span style="font-size: 18pt">CSS</span></p><div class="cnblogs_code">
<pre>import React, {useState} from 'react'
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> Jspang(){
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">关键代码----------start-------</span>
const = useState('blue'<span style="color: rgba(0, 0, 0, 1)">)
const changeColor</span>=()=><span style="color: rgba(0, 0, 0, 1)">{
setColor(color</span>=='blue'?'red':'blue'<span style="color: rgba(0, 0, 0, 1)">)
}
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">关键代码----------end-------</span>
<span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><>
<div>技术胖免费前端教程</div>
<div><button onClick={changeColor}>改变颜色</button></div>
<style jsx><span style="color: rgba(0, 0, 0, 1)">
{`
div { color:${color};}
`}
</span></style>
</>
<span style="color: rgba(0, 0, 0, 1)"> )
}
export </span><span style="color: rgba(0, 0, 255, 1)">default</span> Jspang</pre>
</div>
<p> </p>
<p><span style="font-size: 18pt">懒加载</span></p>
<p><span style="font-size: 18pt"> <span style="font-size: 14pt">懒加载模块</span></span></p>
<p><span style="font-size: 18pt"><span style="font-size: 14pt"> </span></span></p>
<div class="cnblogs_code">
<pre>import React, {useState} from 'react'
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">删除import moment</span>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> Time(){
const </span>=<span style="color: rgba(0, 0, 0, 1)"> useState(Date.now())
const changeTime</span>= <span style="color: rgba(0, 0, 255, 1)">async</span> ()=>{ <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">把方法变成异步模式</span>
<span style="color: rgba(0, 0, 255, 1)"> const moment = await import('moment')</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">等待moment加载完成</span>
setTime(moment.<span style="color: rgba(0, 0, 255, 1)">default</span>(Date.now()).format()) <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注意使用defalut</span>
<span style="color: rgba(0, 0, 0, 1)"> }
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><>
<div>显示时间为:{nowTime}</div>
<div><button onClick={changeTime}>改变时间格式</button></div>
</>
<span style="color: rgba(0, 0, 0, 1)"> )
}
export </span><span style="color: rgba(0, 0, 255, 1)">default</span> Time</pre>
</div>
<p> <span style="font-size: 14pt">懒加载组件</span></p>
<div class="cnblogs_code">
<pre>export <span style="color: rgba(0, 0, 255, 1)">default</span> ()=><div>Lazy Loading Component</div></pre>
</div>
<div class="cnblogs_code">
<pre>import React, {useState} from 'react'<span style="color: rgba(0, 0, 0, 1)">
import dynamic from </span>'next/dynamic'<span style="color: rgba(0, 0, 0, 1)">
const One </span>= dynamic(import('../components/one'<span style="color: rgba(0, 0, 0, 1)">))
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> Time(){
const </span>=<span style="color: rgba(0, 0, 0, 1)"> useState(Date.now())
const changeTime</span>= async ()=><span style="color: rgba(0, 0, 0, 1)">{
const moment </span>= await import('moment'<span style="color: rgba(0, 0, 0, 1)">)
setTime(moment.</span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)">(Date.now()).format())
}
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><>
<div>显示时间为:{nowTime}</div>
<One/>
<div><button onClick={changeTime}>改变时间格式</button></div>
</>
<span style="color: rgba(0, 0, 0, 1)"> )
}
export </span><span style="color: rgba(0, 0, 255, 1)">default</span> Time</pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/lxz-blogs/p/13152017.html
頁:
[1]