Next.js与TypeScript从零起步学习笔记-2.组件

此文章,会介组件的基本使用 参考官网:https://nextjs.org/learn/basics/getting-started 开发环境: window10 x64 node v10.16.3 npm v6.13.4 1.组件 接上一节内容. 在我们实际开发时,页面有些元素往往是重复的,就如简书,无论你换多少篇文章,它的头部都尽是一样 image.png 假如我们为每一个页面都写一个这个这样头部,那就问题大了,有一点小变动,我们就全部都改一次吗?显然不合理.我们可以公共的东西,封装成一个组件,可以套用在任何需要用到的地方. 现在,我们来创建一个公共的组件,以供其他页面使用: 在原来的项目上面,我们来创建一个名为'components'的文件夹,然后在里面创建一个'Header.tsx'的文件,这个是我们的公共头部, 敲入如下代码: import Link from 'next/link'; const linkStyle = { marginRight: 15 }; const Header = () => ( ); export default Header; 如图1: 图1.png 接着,我们需要在其他页面引用这个'公共的头部',打开我们的'pages/index.tsx'页面,把这个页面全改成以下代码: import Header from '../components/Header'; const Home = () => ( ); export default Home; 图2.png 注意图2红框部分,那是引入和应用组件的部分. 然后再在我们的'pages/about.tsx'文件,也相应加入红框部分的代码,如下图3: 图3.png 启动我们项目,可以在浏览器看到效果,如图4: 图4.png 点击'Home'会去到index页,点击about会去到about页,而头部都共用.(请注意哦,components这个文件不一定需要命名为'components',你命名为'comps'也没有关系,就是在其他文件引用时候,把'components'改成'comps'就可以了) 但现在还有个问题,假如我想传入一些参数到组件呢?就例如导航,我想点home时候,头部组件显示现在home页,点击aboutn页时候,头部组件显示about页面. 现在,我们需要改下'components/Header.tsx'这个文件的代码: import { NextPage } from 'next'; import Link from 'next/link'; const linkStyle = { marginRight: 15 }; const Header: NextPage<{ pageName: string }> = (props:any) => ( ); export default Header; 如图5 如图5.png 然后我们会看到home和about页面都报错,乃是因为约束了'pageName'这个参数是必填的,如图6: image.png 现在我们只需要把'pageName'的参数加一下,保存之后,就可以在浏览器看到效果了. 如图6.png 如图6.png 本来呢,想打算把余下内容:参数传递,获取数据以及创建API.都写完了,只是没料到写组件花了如此多时间,下节继续吧,附上git地址:https://github.com/JaqenHo/next_js_learn.git

本文章由javascript技术分享原创和收集