react中如何引入插件?

react中如何引入插件?下面本篇文章给大家通过实例介绍一下react中插件引用(react-slick、react-swipe、react-time)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

1、react-slick{图片滑动展示、}

npm install react-slick

API参数说明:

PropertyTypeDescriptionWorking
accessibilitybool其他类名内滑动器的divYes
classNameString其他类名内滑动器的divYes
adaptiveHeightboolAdjust the slide's height automaticallyYes
arrowsbool是否要显示左右箭头吗?Yes
nextArrowReact ElementUse this element for the next arrow buttonYes
prevArrowReact ElementUse this element for the prev arrow buttonYes
autoplayboolShould the scroller auto scroll?Yes
autoplaySpeedintdelay between each auto scoll. in msYes
centerModeboolShould we centre to a single item?Yes
centerPadding
cssEase
customPagingfuncCustom paging templates. Yes
dotsboolShould we show the dots at the bottom of the galleryYes
dotsClassstringClass applied to the dots if they are enabledYes
draggableboolIs the gallery scrollable via dragging on desktop?Yes
easingstring
fadeboolSlides use fade for transitionYes
focusOnSelectbool点击响应幻灯片!Yes
infinitebool是否围绕幻灯片内容循环展开!Yes
initialSlideintwhich item should be the first to be displayedYes
lazyLoadboolLoads images or renders components on demandsYes
pauseOnHoverboolprevents autoplay while hoveringYes
responsivearray的形式的对象阵列{ breakpoint: int, settings: { ... } }的断点INTmaxWidth当分辨率低于该值,以便设定将被应用。阵列中的断点应该smalles责令最大。的设定对象来禁用那个断点渲染转盘使用到位“unslick”。例:[ { breakpoint: 768, settings: { slidesToShow: 3 } }, { breakpoint: 1024, settings: { slidesToShow: 5 } }, { breakpoint: 100000, settings: 'unslick' } ]Yes
rtlboolReverses the slide orderYes
slidestring
slidesToShowint一次可见多少个幻灯片数量Yes
slidesToScrollint每个导航项要滚动多少个幻灯片
speedint
swipebool
swipeToSlideboolAllow users to drag or swipe directly to a slide irrespective of slidesToScrollYes
touchMovebool
touchThresholdint
variableWidthbool
useCSSboolEnable/Disable CSS TransitionsYes
verticalboolVertical slide modeYes
afterChangefunctioncallback function called after the current index changesYes
beforeChangefunctioncallback function called before the current index changesYes
slickGoTointgo to the specified slide number

react-slick官网说明:http://www.bootcdn.cn/react-slick/readme/

slick插件说明:http://kenwheeler.github.io/slick/

2、react-swipe{图片滑动展示、}

npm install react swipe-js-iso react-swipe

第一种方式,全屏左右滑动效果

1.jpg

HTML代码为:

import React from 'react'
import ReactDOM from 'react-dom';
import ReactSwipe from 'react-swipe';

class Carousel extends React.Component {
constructor(props){
        super(props);
        this.state={
            datalist:[],
            playinglist:[]
        }
    }
    componentWillMount(){
        console.log(this.state.datalist.length)
        axios.get('v4/api/billboard/home').then(res=>{
            //接口错误排除
            if(res.data.data.billboards){
                this.setState({
                    datalist:res.data.data.billboards
                })
            }
        })
        axios.get('v4/api/film/now-playing').then(res=>{
            this.setState({
                playinglist:res.data.data.films
            })
        })
    }
    render() {
        return (
            <ReactSwipe className="carousel" swipeOptions={{continuous:true,auto:3000}} key={this.state.datalist.length}>
                 {
                     this.state.datalist.map((item)=>
                         <div key={item.id}>
                              <img src={item.imageUrl} style={{width:'100%'}} />
                         </div>
                     )
                 }
               </ReactSwipe>
        );
    }
}

ReactDOM.render(
    <Carousel />, 
    document.getElementById('app')
);

本地react-router4-app项目效果为: http://localhost:8095/home

react-swiper官网说明:http://www.bootcdn.cn/react-swipe/readme/

3、react-time{React组件用于格式化的日期到<time>HTML5元素}

npm install react-time

如果不行可能还依赖moment

npm install moment --save

2.jpg

HTML用法:

import React from 'react'
import Time from 'react-time'

class MyComponent extends React.Component {

  render() {
    let now = new Date()
    let wasDate = new Date("Thu Jul 18 2013 15:48:59 GMT+0400")
    return (
      <div>
        <p>Today is <Time value={now} format="YYYY/MM/DD" /></p>
        <p>This was <Time value={wasDate} titleFormat="YYYY/MM/DD HH:mm" relative /></p>
      </div>
    )
  }
}

另一种用法:

import React from 'react'
import Time from 'react-time'

class MyComponent extends React.Component {

  render() {
    return (
      <div>
        <div className="film-word2">
                               <span>上映日期:<Time value={this.state.info.premiereAt} format="YYYY年MM月DD日上映" /></span>
                               <span></span>
                          </div>
      </div>
    )
  }
}
<div className="col-xs-5 right">
     <div className="showing-date"><Time value={item.premiereAt} format="MM月DD日上映" /></div>
</div>

本地效果react-router4-app详情页查看:http://localhost:8095/detail/3071

react-time用法说明:https://www.ctolib.com/react-time.html#articleHeader0

更多web前端知识,请查阅 HTML中文网 !!

以上就是react中如何引入插件?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏