反应轮播组件问题

Question

我已经包含了 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;

Answer 1

请从“Coverflow”中删除样式

<Coverflow width="100%" height="100%"
  displayQuantityOfSide={5}
  navigation={false}
  enableScroll={true}
  clickable={true}
  active={this.state.isActive}
>

希望这将有助于解决问题