响应Web转盘组件问题

我已经包含了react coverflow组件,在我的项目中使用了一个漂亮的carousel。加载很好,但每当我单击图像时,它就会显示以下错误:

我有以下代码。你们中有人面临同样的问题吗。

在安装了react coverflow组件之后,我尝试使用npm安装。即使在那之后,点击也会显示同样的错误。有依赖性问题吗?有什么帮助吗?

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;