Javascript 应对汽车零部件问题
我已经包括了react coverflow组件,以便在我的项目中使用一个漂亮的旋转木马。加载很好,但每当我点击图像时,屏幕截图中会显示以下错误: 我有以下代码。你们有没有遇到过同样的问题注意:在安装react coverflow组件后,我尝试使用npm安装。之后,它也显示了相同的错误。是否存在依赖性问题?有什么帮助吗Javascript 应对汽车零部件问题,javascript,reactjs,carousel,web-component,react-component,Javascript,Reactjs,Carousel,Web Component,React Component,我已经包括了react coverflow组件,以便在我的项目中使用一个漂亮的旋转木马。加载很好,但每当我点击图像时,屏幕截图中会显示以下错误: 我有以下代码。你们有没有遇到过同样的问题注意:在安装react coverflow组件后,我尝试使用npm安装。之后,它也显示了相同的错误。是否存在依赖性问题?有什么帮助吗 import React, { Component } from 'react'; import Coverflow from 'react-coverflow'; import
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”中删除样式
<Coverflow width="100%" height="100%"
displayQuantityOfSide={5}
navigation={false}
enableScroll={true}
clickable={true}
active={this.state.isActive}
>
希望这将有助于解决问题尝试了您的解决方案@Shiladitya,但在单击时仍然显示相同的错误。