Javascript REACT中带有js和css的旋转木马

我用html、css和js创建了一个旋转木马。以下是相应的代码

HTML:

JS:

错误为“Uncaught TypeError:无法读取未定义的属性'style'

我想要在转盘中的图像是从基于类的组件中的DB中检索的

import React from "react";

const ImageSlide = props => {
  if (
    props.imagePath === undefined ||
    props.imagePath === null ||
    props.imagePath.length === 0
  )
    return null;

  return (
    <div className={props.styles}>
      {props.imagePath.map(image => {
        const path = props.svgsArray.find(str => str.indexOf(image.hash) > 1);
        // console.log(path);
        return (
          <img
            className="mySlidesDH slide-to-right"
            key={image.id}
            src={path}
            alt={props.styles}
          />
        );
      })}
      <div className={props.styles2}>
          <img src={require("./images/1_Door_hardware/0.png?")} alt="" />
      </div>
    </div>
  );
};

export default ImageSlide;

我只是一个英语初学者。我将感谢任何帮助，以取得同样的结果

下面是在基于类的组件中调用的REACT代码

import React from "react";

const ImageSlide = props => {
  if (
    props.imagePath === undefined ||
    props.imagePath === null ||
    props.imagePath.length === 0
  )
    return null;

  return (
    <div className={props.styles}>
      {props.imagePath.map(image => {
        const path = props.svgsArray.find(str => str.indexOf(image.hash) > 1);
        // console.log(path);
        return (
          <img
            className="mySlidesDH slide-to-right"
            key={image.id}
            src={path}
            alt={props.styles}
          />
        );
      })}
      <div className={props.styles2}>
          <img src={require("./images/1_Door_hardware/0.png?")} alt="" />
      </div>
    </div>
  );
};

export default ImageSlide;

从“React”导入React；
const ImageSlide=props=>{
如果(
props.imagePath==未定义||
props.imagePath==null||
props.imagePath.length==0
)
返回null；
返回(
{props.imagePath.map（image=>{
const path=props.svgsArray.find（str=>str.indexOf（image.hash）>1）；
//console.log（路径）；
返回(
);
})}
);
};
导出默认图像幻灯片；

---

请注意，ValueDoorHardwareTile通过

props.style

传递，ValueOverlyDH通过

props.styles2

传递。请尝试以下软件包：

对于React Native：

这是一个例子，但对于react native来说，它可能与您如何进行简单的右幻灯片的想法相同，但您仍然需要一个函数来淡出或将容器的不透明度设置为零，一旦它向右滑动，另一个函数将其设置为原始位置，并替换容器内的图片

此状态中容器的第一个设置位置：

this.state = {
   containerRightSlideAnim: new Animated.ValueXY({x: 0, y: 0})
}

this.containerRightSlide = Animated.timing(this.state.containerRightSlideAnim, {
      toValue: {x: 200, y: 0},
      duration: 10000,
      //speed: 0.1,
      easing: Easing.in(Easing.ease)
})

在构造器中为X设置位置：

this.state = {
   containerRightSlideAnim: new Animated.ValueXY({x: 0, y: 0})
}

this.containerRightSlide = Animated.timing(this.state.containerRightSlideAnim, {
      toValue: {x: 200, y: 0},
      duration: 10000,
      //speed: 0.1,
      easing: Easing.in(Easing.ease)
})

制作一个触发右侧幻灯片动画的函数：

triggerRightSlide(){
 this.containerRightSlide.start();
}

添加内部渲染：

render() {
    const animatableRightSlideStyle = this.state.containerSlideAnim.getTranslateTransform()

    return (<View>
        <Animated.View style={[animatableRightSlideStyle]}></Animated.View>
    </View>)
}

render（）{
const animatableRightSlideStyle=this.state.containerSlideAnim.getTranslateTransform（）
返回(
)
}

这是一个在ReactJS中使用分页的旋转木马的工作原型

HTML

ReactJS中带分页的原型转盘

JS反应

从“React”导入React
从“react dom”导入react dom
类分页扩展了React.Component{
建造师（道具）{
超级（道具）；
}
paginationRender=（源、activeItem、handleEvent）=>{
const items=source.map（（item，i）=>{
让itemClass='page item'；
if（item.id==activeItem）{
itemClass+=‘活动’；
}
return

；
});
return



{items}


；
};
render（）{
const{itemsrc，activeItem，handleEvent}=this.props；
//info（'MenuContent->render（）'，{source}）；
返回{this.paginationRender（itemsrc、activeItem、handleEvent）}；
}
}
类Carousel扩展React.Component{
建造师（道具）{
超级（道具）；
}
转盘渲染器=（源、活动项、handleEvent）=>{
//console.info（'Carousel->carouselRender[0]，{source，state:this.state}）；
const indicators=source.map（（项目，i）=>{
让itemClass=''；
if（item.id==activeItem）{
itemClass+=‘活动’；
}
//info（'Carousel->carouselRender[3]，{id:item.id，item，pageItemClass，activeItem:activeItem}）；
将
handleEvent（e，'clickItem'，item）}>
；
});   
常量imgs=source.map（（项，i）=>{
let itemClass='carousel item'；
if（item.id==activeItem）{
itemClass+=‘活动’；
}
//info（'Carousel->carouselRender[5]，{id:item.id，item，pageItemClass，activeItem:activeItem}）；
返回
;
});
//console.info（'Carousel->carouselRender[7]，{}）；
返回

{指标}

{imgs}
;
};
render（）{
const{itemsrc，activeItem，handleEvent}=this.props；
//info（'MenuContent->render（）'，{source}）；
返回{this.carouselRender（itemsrc、activeItem、handleEvent）}；
}
}
常量输入属性={
项目SSRC：[
{id:0，
名称：“洛杉矶”，
级别：“基本”，
src:'https://www.w3schools.com/bootstrap4/la.jpg'
},
{
id:1，
名字：'芝加哥'，
级别：“基本”，
src:'https://www.w3schools.com/bootstrap4/chicago.jpg'
},
{
id:2，
名称：'纽约'，
级别：“高级”，
src:'https://www.w3schools.com/bootstrap4/ny.jpg'
},           
],
};
类包装器扩展了React.Component{
建造师（道具）{
超级（道具）
render() {
    const animatableRightSlideStyle = this.state.containerSlideAnim.getTranslateTransform()

    return (<View>
        <Animated.View style={[animatableRightSlideStyle]}></Animated.View>
    </View>)
}

<h2>Prototype Carousel with pagination in ReactJS</h2>
<div id="app"></div>

    import React from 'react'
    import ReactDOM from 'react-dom'

    class Pagination extends React.Component {
        constructor( props ){
            super( props );
        }

        paginationRender = ( source, activeItem, handleEvent ) => {

            const items = source.map(( item, i ) => {
                let itemClass = 'page-item';
                if( item.id === activeItem ){
                    itemClass += ' active';
                }
                return <li key={i} className={ itemClass }>
                    <a className="page-link" href="#"
                    onClick={ e => handleEvent( e, 'clickItem', item )}>
                        { i + 1 }</a>
                </li>;
            });

            return <ul className="pagination pagination-sm justify-content-center">
                <li className="page-item">
                    <a className="page-link" href="#" 
                        onClick={e => handleEvent( e, 'prevItem', {}, items )}>Prev</a>
                </li>
                {items}
                <li className="page-item">
                    <a className="page-link" href="#"
                        onClick={e => handleEvent( e, 'nextItem', {}, items )}>Next</a>
                </li>
            </ul>;
        };

        render() {
            const { itemsSrc, activeItem, handleEvent } = this.props;
            //console.info('MenuContent->render()', { source });

            return <div>{this.paginationRender( itemsSrc, activeItem, handleEvent ) }</div>;
        }
    }


    class Carousel extends React.Component {
        constructor( props ){
            super( props );
        }

        carouselRender = (  source, activeItem, handleEvent ) => {
            //console.info('Carousel->carouselRender [0]', { source, state: this.state });

             const indicators = source.map(( item, i ) => {
                let itemClass = '';
                if( item.id === activeItem ){
                    itemClass += ' active';
                }
                //console.info('Carousel->carouselRender [3]', { id: item.id, item, pageItemClass, activeItem: activeItem });
                return <li key={i} data-target="#demo" data-slide-to="1" className={ itemClass }
                                 onClick={ e => handleEvent( e, 'clickItem', item )}>></li>;
            });   

            const imgs = source.map(( item, i ) => {
                let itemClass = 'carousel-item';
                if( item.id === activeItem ){
                    itemClass += ' active';
                }
                //console.info('Carousel->carouselRender [5]', { id: item.id, item, pageItemClass, activeItem: activeItem });
                return <div key={i} className={ itemClass }>
                    <img src={item.src} className="img-fluid" alt="New York" />
                </div>;
            });

            //console.info('Carousel->carouselRender [7]', { });
            return <div id="demo" className="carousel slide" data-ride="carousel">
                                <ul className="carousel-indicators">
                                    { indicators }
                                </ul>
                                <div className="carousel-inner">
                                    { imgs }
                                </div>
                                <a className="carousel-control-prev" href="#demo" data-slide="prev">
                                    <span className="carousel-control-prev-icon"
                                        onClick={e => handleEvent( e, 'prevItem', {}, source )}>
                                    </span>
                                </a>
                                <a className="carousel-control-next" href="#demo" data-slide="next">
                                    <span className="carousel-control-next-icon"
                                        onClick={e => handleEvent( e, 'nextItem', {}, source )}>
                                    </span>
                                </a>
                            </div>;
        };

        render() {
            const { itemsSrc, activeItem, handleEvent } = this.props;
            //console.info('MenuContent->render()', { source });

            return <div>{this.carouselRender( itemsSrc, activeItem, handleEvent ) }</div>;    
        }
    }

    const inputProps = {
        itemsSrc: [
                { id: 0,
                    name: 'Los Angeles',
                    level: 'basic',
                    src: 'https://www.w3schools.com/bootstrap4/la.jpg'
             },
                {
                    id: 1,
                    name: 'Chicago',
                    level: 'basic',
                    src: 'https://www.w3schools.com/bootstrap4/chicago.jpg'
                },
                {
                    id: 2,
                    name: 'New York',
                    level: 'advanced',
                    src: 'https://www.w3schools.com/bootstrap4/ny.jpg'
                },           
            ],
    };

    class Wrapper extends React.Component {
        constructor( props ){
            super( props );
            this.state = {
                activeItem: 0,
            };
        }

        handleEvent = ( e, actionType, item, items ) => {
            e.preventDefault();
            let itemsLength, activeItem;

            switch( actionType ){
                case 'clickItem':
                    //console.info('MenuContent->paginationRender', { actionType, id: item.id, item });
                    this.setState({ activeItem: item.id });
                break;
                case 'prevItem':
                    activeItem = this.state.activeItem;
                    if ( activeItem === 0  ){
                        break;
                    }
                    activeItem -= 1;
                    this.setState({ activeItem });
                break;
                case 'nextItem':
                    itemsLength = items.length;
                    activeItem = this.state.activeItem;
                    if (activeItem === itemsLength -1) {
                        break;
                    }
                    activeItem += 1;
                    this.setState({ activeItem });
                break;
            }
            //console.info('MenuContent->handleEvent()', { actionType, item, items });

        }

        render(){
            let props = this.props;
            const { activeItem } = this.state;
            props = { ...props, handleEvent: this.handleEvent, activeItem };

            return <div className="App">

                <div className="container-fluid">
                    <div className="row">
                        <div className="col-1">
                        </div>
                        <div className="col-10">

                            <Pagination { ...props }/>
                            <Carousel { ...props }/>
                        </div>
                        <div className="col-1">
                        </div>
                    </div>
                </div>
            </div>;
        }
    }

    ReactDOM.render(<Wrapper {  ...inputProps }/>, document.getElementById('app'));