react中如何引入插件？

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

1、react-slick｛图片滑动展示、｝

npm install react-slick

API参数说明：

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

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

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

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<p style="color:transparent">来源gao!%daima.com搞$代*!码网</p> {

  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

更多react的相关知识，请查阅 搞代码网 ！！

以上就是react中如何引入插件？的详细内容，更多请关注gaodaima搞代码网其它相关文章！

喜欢 (0)赏

[搞代码]

分享 (0)