props使用

如鹰展翅上腾

于 2019-12-19 20:05:18 发布

阅读量192

点赞数

CC 4.0 BY-SA版权

分类专栏：公众号

本文链接：https://blog.youkuaiyun.com/wdq121516/article/details/103621356

公众号专栏收录该内容

1 篇文章

订阅专栏

本文探讨了基于Swiper插件封装组件的方法，解决组件多次调用时的轮播点不滑动问题，以及数据更新前轮播结构已绘制导致的滑动失效。同时介绍了如何使用props构建类似插槽效果，并进行数据校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据swiper插件封装swiper组件

组件多次调用复用时，出现轮播点不滑动的问题是因为同一个swiper元素被操作多次，所以要保证选中元素的唯一性
轮播图不滑动的问题是因为数据更新之前，swiper结构已经绘制完毕

封装 swiper组件2

props使用

如果需要构建类似插槽效果的应用可以用prop数据绑定
jsx语法去传递。 top={
header
}

props数据校验

安装prop-types

 npm install --save prop-types

使用指南

import React from "react"
import _propType from "prop-types"
class Slot extends React.Component {
   static propTypes ={
       name:_propType.string
   }
   render () {
       console.log(this.props)
       return (
           <div>
               {this.props.top}
               <h1>good morning {this.props.name} </h1>
               {this.props.bottom}
           </div>
       )
   }
}

export default Slot

   }
}

export default Slot