lyfeyaj / swipe

Swipe is the most accurate touch slider. Support both React and Angular.

Home Page:https://swipe.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

error in React 15.6.1

aKaigege opened this issue · comments

addComponentAsRefTo(…): Only a ReactOwner can have refs.

import React from 'react'
import { Swipe, SwipeItem } from 'swipejs/react';
import {Link} from 'react-router-dom'

import './style.less'
class Category extends React.Component{
constructor(props , context){
super(props , context)
this.state = {};

this.handleClick = this.handleClick.bind(this);
this.handleCallback = this.handleCallback.bind(this);
this.onTransactionEnd = this.onTransactionEnd.bind(this);
}

onTransactionEnd(index, elem) {
// Your own logic
}

handleCallback(index, elem) {
// Your own logic
}

handleClick(e) {
// Your own logic
}

render() {
return (
  <div className='react-swipe-example'>
    <h2>React Swipe Example</h2>
    <Swipe className='custom-swipe-container-class'
           ref='swipe'
           startSlide={0}
           speed={300}
           auto={3000}
           draggable={false}
           continuous={true}
           autoRestart={false}
           disableScroll={false}
           stopPropagation={false}
           callback={this.handleCallback}
           transitionEnd={this.onTransactionEnd}>
      <SwipeItem className='custom-swipe-item-class'
                 onClick={this.handleClick}>
        Slide One
      </SwipeItem>
      <SwipeItem className='custom-swipe-item-class'
                 onClick={this.handleClick}>
        Slide Two
      </SwipeItem>
      <SwipeItem className='custom-swipe-item-class'
                 onClick={this.handleClick}>
        Slide Three
      </SwipeItem>
    </Swipe>
  </div>
);

}
}

export default Category

I dont know why always warming addComponentAsRefTo(…): Only a ReactOwner can have refs.

Can't reproduce.