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