Javascript React Web转盘组件问题

我已经包括了react coverflow组件，以便在我的项目中使用一个漂亮的旋转木马。加载很好，但每当我点击图像时，就会显示以下错误：

我有以下代码。你们有没有遇到过同样的问题

注意：在安装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;

import React，{Component}来自'React'；
从“react Coverflow”导入Coverflow；
从'radium'导入{StyleRoot}；
类GetCarousel扩展组件{
建造师（道具）{
超级（道具）；
this.state={isActive:0}；
}
手感唤醒（e）{
//console.log（e.currentTarget.id）；
//var text=e.currentTarget.id；
var编号=编号（如currentTarget.id）；
这是我的国家({
isActive:编号
});
}
render（）{
返回(
{/**/}
{/*
*/}
{/**/}
);
}
}
导出默认的GetCarousel；

Coverflow.js中似乎有问题，您需要发布它的code.dude安装后我没有得到Coverflow.js文件。有一个react-coverflow.js文件，文件中有一个巨大的代码，非常大，会让你喘不过气来@法瓦齐见。尝试从

中删除
样式
道具是否没有其他方法来解决此错误？因为在这个巨大的代码中有很多地方使用了@Fawaz的样式