我已经将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;