第三方组件使用
我们不需要重复造轮子，有些功能已经有非常优秀的成品的情况下，我们直接拿来使用即可。
看效果
()=>{
SwiperCore.use([Autoplay, Keyboard, EffectCoverflow]);
return <Swiper
spaceBetween={50}
slidesPerView={2}
autoplay
keyboard
loop
navigation
pagination={{
clickable: true
}}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
>
<SwiperSlide><img referrer="no-referrer|origin|unsafe-url" src="http://up.iosdesk.com/pic/5d/6e/ac/5d6eacd528a758336f7c9518654aec5f.jpg" /></SwiperSlide>
<SwiperSlide><img referrer="no-referrer|origin|unsafe-url" src="http://up.iosdesk.com/pic/f2/9e/22/f29e227b64e6b96f5d5248eec606dff0.jpg" /></SwiperSlide>
<SwiperSlide>Just some words here</SwiperSlide>
<SwiperSlide><img referrer="no-referrer|origin|unsafe-url" src="http://5b0988e595225.cdn.sohucs.com/images/20171201/bf69d781d16f4da6bc3d5aa9941c7cd1.jpeg" /></SwiperSlide>
</Swiper>
}
Just some words here
Just some words here
查找适用的第三方组件
主要可以通过在NPM上搜索获得。稍有品质的第三方组件都会发布在这上面，如果找不到合适的关键字搜索，也可以通过某度等搜索引擎查找合适的第三方组件。比如我们要找一个轮播图组件，可以搜索关键字react swiper查找，合适的第三方组件的标准为
- 用户量大，可以通过其
周下载量(Weekly Downloads)多寡来判定。 - 作者维护情况，可以综合最新版本的发布时间以及总版本数来判定
- 请认真核对该组件的许可是否适用你的项目。
查看使用文档
通常一个合格的组件都会有比较完善的文档来说明它的用法，比如我们就找到了轮播图控件的文档，依照这个说明文档，我们就可以在项目中使用它。
在项目中应用之
按该组件的说明来做，文档上会提供有示例代码，通常情况下，直接复制示例代码到项目中即可。我们将示例代码中的Usage部分复制进我们新建的一个页面pg018中。示例如下:
import { GetStaticProps, NextPage, PageConfig } from 'next';
import Head from 'next/head';
import { useEffect, useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.scss';
interface IProps {
}
const page: NextPage<IProps> = () => {
return (
<>
<Head>
<title>01factory</title>
</Head>
<C001></C001>
</>
);
};
export const config: PageConfig = {
amp: false
};
export default page;
export const getStaticProps: GetStaticProps<IProps> = async () => {
return {
props: {},
revalidate: 60 * 60 * 24
};
};
function C001() {
return <>
<Swiper
spaceBetween={50}
slidesPerView={3}
loop
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
...
</Swiper>
</>;
}
比较不幸，这个页面是无法运行的，首先，我们使用这个第三方的组件，我们首先需要安装该模块到我们的项目。这是因为我们使用太着急了，没有认真看文档，文档上有安装说明，需要运行命令npm i swiper，按照这个说明，我们打开命令终端，切换到当前目录cd /my/project/path/(注意这个命令是不能直接复制使用的啊，需要根据你项目的实际路径修改).然后执行命令yarn add swiper.等待安装完成，重启调试。
接下来我们访问这个页面时还是一片空白，没有得到我们预期的效果，至少页面上出点儿会动的东西呀。我们查看运行命令yarn dev的终端窗口，发现有错误信息：error - ./node_modules/swiper/swiper.scss。
官方文档给的代码不行，我们是会经常遇到这样的情况，解决办法有两个：
- 不纠结，换别的第三方组件
- 修改这个错误
这个错误的解决过程比较麻烦，我直接给出我的解决方案：不引入sass样式文件，直接使用css样式文件，即将
import 'swiper/swiper.scss';
修改为：
import 'swiper/swiper.min.css';
或：
import 'swiper/swiper-bundle.min.css';
以上两个样式的差别为第一个体积小,但如果用到pagination或是navigation这样的属性时会缺样式.
现在，这个页面上就有东西了，我们也能够使用鼠标拖动文字，但它自己是不会动的，我们再从使用文档里找相关信息，发现需要填写一个叫autoplay的属性。
我们直接将属性添加上：
function C001() {
return <>
<Swiper
spaceBetween={50}
slidesPerView={3}
autoplay
loop
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
...
</Swiper>
</>;
}
但是它还是不会动的，我们再进一步找文档，原来自动播放是一个单独的模块，需要引用它。最后修改完的代码如下：
import { GetStaticProps, NextPage, PageConfig } from 'next';
import Head from 'next/head';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Autoplay, EffectCoverflow, Keyboard, Pagination, Navigation } from 'swiper/core';
SwiperCore.use([Autoplay, Keyboard, EffectCoverflow, Pagination, Navigation]);
import 'swiper/swiper-bundle.min.css';
interface IProps {
}
const page: NextPage<IProps> = () => {
return (
<>
<Head>
<title>示例页面</title>
</Head>
<C001></C001>
</>
);
};
export const config: PageConfig = {
amp: false
};
export default page;
export const getStaticProps: GetStaticProps<IProps> = async () => {
return Promise.resolve({
props: {}
});
};
function C001() {
return <>
<Swiper
spaceBetween={50}
slidesPerView={2}
autoplay
navigation
pagination={{
clickable: true,
}}
keyboard
loop
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
</Swiper>
</>;
}
