我已经包含了 react coverflow 组件,以便在我的项目中使用漂亮的轮播。它加载正常,但是每当我单击图像时,它都会向我显示以下错误:
我有以下代码。有没有人遇到过同样的问题。
注意:我在安装 react coverflow 组件后尝试使用 npm install 。即使在那之后它在点击时也显示相同的错误。有依赖问题吗?有什么帮助吗?
import React, { Component } from 'react';
import Coverflow from 'react-coverflow';
import { StyleRoot } from 'radium';
class GetCarousel extends Component {
constructor(props) {
super(props);
this.state = { isActive: 0 };
}
handleCarousal(e) {
// console.log(e.currentTarget.id);
// var text = e.currentTarget.id;
var number = Number(e.currentTarget.id);
this.setState({
isActive: number
});
}
render() {
return(
<div>
{/*<StyleRoot>*/}
<Coverflow width="100%" height="100%"
displayQuantityOfSide={5}
navigation={false}
enableScroll={true}
clickable={true}
active={this.state.isActive}
style={{width: "100%", height: "100%"}}
>
<div
id="0"
onClick={this.handleCarousal.bind(this)}
onKeyDown={this.handleCarousal.bind(this)}
role="menuitem"
tabIndex="0"
style={{width: "100%", height: "100%"}}
>
<img
src='https://lorempixel.com/250/250/nature/1'
alt='title or description'
style={{
display: 'block',
width: '100%',
}}
/>
</div>
<div
id="1"
onClick={this.handleCarousal.bind(this)}
onKeyDown={this.handleCarousal.bind(this)}
role="menuitem"
tabIndex="1"
>
<img
src='https://lorempixel.com/250/250/nature/2'
alt='title or description'
style={{
display: 'block',
width: '100%',
}}
/>
</div>
<div
id="2"
onClick={this.handleCarousal.bind(this)}
onKeyDown={this.handleCarousal.bind(this)}
role="menuitem"
tabIndex="2"
>
<img
src='https://lorempixel.com/250/250/nature/3'
alt='title or description'
style={{
display: 'block',
width: '100%',
}}
/>
</div>
<div
id="3"
onClick={this.handleCarousal.bind(this)}
onKeyDown={this.handleCarousal.bind(this)}
role="menuitem"
tabIndex="3"
>
<img
src='https://lorempixel.com/250/250/nature/4'
alt='title or description'
style={{
display: 'block',
width: '100%',
}}
/>
</div>
<div
id="4"
onClick={this.handleCarousal.bind(this)}
onKeyDown={this.handleCarousal.bind(this)}
role="menuitem"
tabIndex="4"
>
<img
src='https://lorempixel.com/250/250/nature/5'
alt='title or description'
style={{
display: 'block',
width: '100%',
}}
/>
</div>
{/*<img src="https://lorempixel.com/250/250/nature/1" data-action="#one!"/>
<img src="https://lorempixel.com/250/250/nature/2" data-action="#two!"/>
<img src="https://lorempixel.com/250/250/nature/3" data-action="#three!"/>
<img src="https://lorempixel.com/250/250/nature/4" data-action="#four!"/>
<img src="https://lorempixel.com/250/250/nature/5" data-action="#five!"/>*/}
</Coverflow>
{/*</StyleRoot>*/}
</div>
);
}
}
export default GetCarousel;