此文章,會(huì)介組件的基本使用
參考官網(wǎng):https://nextjs.org/learn/basics/getting-started
開發(fā)環(huán)境:
window10 x64
node v10.16.3
npm v6.13.4
1.組件
接上一節(jié)內(nèi)容.
在我們實(shí)際開發(fā)時(shí),頁面有些元素往往是重復(fù)的,就如簡書,無論你換多少篇文章,它的頭部都盡是一樣
假如我們?yōu)槊恳粋€(gè)頁面都寫一個(gè)這個(gè)這樣頭部,那就問題大了,有一點(diǎn)小變動(dòng),我們就全部都改一次嗎?顯然不合理.我們可以公共的東西,封裝成一個(gè)組件,可以套用在任何需要用到的地方.
現(xiàn)在,我們來創(chuàng)建一個(gè)公共的組件,以供其他頁面使用:
在原來的項(xiàng)目上面,我們來創(chuàng)建一個(gè)名為'components'的文件夾,然后在里面創(chuàng)建一個(gè)'Header.tsx'的文件,這個(gè)是我們的公共頭部,
敲入如下代碼:
import Link from 'next/link';
const linkStyle = {
marginRight: 15
};
const Header = () => (
<div>
<Link href="/">
<a style={linkStyle}>Home</a>
</Link>
<Link href="/about">
<a style={linkStyle}>About</a>
</Link>
</div>
);
export default Header;
如圖1:
接著,我們需要在其他頁面引用這個(gè)'公共的頭部',打開我們的'pages/index.tsx'頁面,把這個(gè)頁面全改成以下代碼:
import Header from '../components/Header';
const Home = () => (
<div>
<Header />
<p>Hello Next.js</p>
</div>
);
export default Home;
注意圖2紅框部分,那是引入和應(yīng)用組件的部分.
然后再在我們的'pages/about.tsx'文件,也相應(yīng)加入紅框部分的代碼,如下圖3:
啟動(dòng)我們項(xiàng)目,可以在瀏覽器看到效果,如圖4:
點(diǎn)擊'Home'會(huì)去到index頁,點(diǎn)擊about會(huì)去到about頁,而頭部都共用.(請注意哦,components這個(gè)文件不一定需要命名為'components',你命名為'comps'也沒有關(guān)系,就是在其他文件引用時(shí)候,把'components'改成'comps'就可以了)
但現(xiàn)在還有個(gè)問題,假如我想傳入一些參數(shù)到組件呢?就例如導(dǎo)航,我想點(diǎn)home時(shí)候,頭部組件顯示現(xiàn)在home頁,點(diǎn)擊aboutn頁時(shí)候,頭部組件顯示about頁面.
現(xiàn)在,我們需要改下'components/Header.tsx'這個(gè)文件的代碼:
import { NextPage } from 'next';
import Link from 'next/link';
const linkStyle = {
marginRight: 15
};
const Header: NextPage<{ pageName: string }> = (props:any) => (
<div>
<Link href="/">
<a style={linkStyle}>Home</a>
</Link>
<Link href="/about">
<a style={linkStyle}>About</a>
</Link>
<div>這里是:{props.pageName}</div>
</div>
);
export default Header;
如圖5
然后我們會(huì)看到home和about頁面都報(bào)錯(cuò),乃是因?yàn)榧s束了'pageName'這個(gè)參數(shù)是必填的,如圖6:
現(xiàn)在我們只需要把'pageName'的參數(shù)加一下,保存之后,就可以在瀏覽器看到效果了.
本來呢,想打算把余下內(nèi)容:參數(shù)傳遞,獲取數(shù)據(jù)以及創(chuàng)建API.都寫完了,只是沒料到寫組件花了如此多時(shí)間,下節(jié)繼續(xù)吧,附上git地址:https://github.com/JaqenHo/next_js_learn.git
