ReactSwipeableViews로 작성된 회전식 메뉴에 항목이 표시되지 않습니다.

Question

this carousel을 및 react-swipeable-views을 사용하여 구현하려고합니다.

const items = [ 
    'http://estruct.com.au/wp-content/uploads/2014/10/old-gccc-logo.png', 
    'http://www.activehealthycommunities.com.au/wp-content/uploads/2014/07/City-of_Gold-Coast_stacked_CMYK-01.jpg' 
    ] 
    return (
    <Carousel items={items} autoplay={true} /> 
) 

:이 같은 Carousel를 사용

import React, {Component, PropTypes} from 'react' 
import {v4} from 'node-uuid' 
import CarouselItem from './CarouselItem' 
import autoPlay from 'react-swipeable-views/lib/autoPlay' 
import SwipeableViews from 'react-swipeable-views' 

const AutoplaySwipeableViews = autoPlay(SwipeableViews) 

export default class Carousel extends Component { 

    static contextTypes = { 
     muiTheme: PropTypes.object.isRequired 
    } 

    static propTypes = { 
     items:PropTypes.arrayOf(PropTypes.string), 
     autoplay:PropTypes.bool 
    } 

    static defaultProps = { 
     autoplay:false 
    } 


    constructor(props) { 
     super(props) 
    } 

    render() { 

     const carousel = { 
      overflow:'hidden', 
      position:'relative', 
      width:'100%', 
      perspective:'500px', 
      transformStyle:'preserve-3d', 
      transformOrigin:'0% 50%' 
     } 

     const carouselSlider = { 
      top:0, 
      left:0, 
      height:0 
     } 

     const {style:customStyles} = this.props 

     const style = Object.assign(
      carousel, 
      carouselSlider, 
      customStyles 
     ) 

     const {prepareStyles} = this.context.muiTheme 
     const SwipeImplementation = this.props.autoplay?AutoplaySwipeableViews:SwipeableViews 
     debugger 
     const carouselItems = this.props.items.map(function(item){ 
      debugger 
      return <CarouselItem key={v4()} href="#" image={item}/> 
     }) 
     return (<div style={prepareStyles(style)}> 
       <SwipeImplementation> 
        {carouselItems} 
       </SwipeImplementation> 
      </div> 
     ) 
    } 
} 

:

import React, {Component, PropTypes} from 'react' 

export default class CarouselItem extends Component { 

    static contextTypes = { 
     muiTheme: PropTypes.object.isRequired 
    } 

    static defaultProps = { 
     href:'#' 
    } 

    constructor(props) { 
     super(props) 
    } 

    render() { 
     const carouselItemStyle = { 
      width:'100%', 
      height:'100%', 
      minHeight:'400px', 
      position:'absolute', 
      top:0, 
      left:0, 
      zIndex:-1, 
      opacity:1, 
      display:'block' 
     } 

     const {prepareStyles} = this.context.muiTheme 
     const {href,image} = this.props 

     debugger 
     return (<a href={href} style={prepareStyles(carouselItemStyle)}> 
       <img src={image}/> 
      </a> 
     ) 
    } 
} 

나는이처럼 보이는 회전 목마 구성 요소가 :

나는 다음과 같습니다 회전 목마 항목이

캐 러셀 항목이 표시되지 않는다는 것을 알았습니다. 개발자 도구를 보면 전환이 일어나고 있지만 항목이 표시되지 않습니다.

webpackbin with the code 나는 내 dev 환경에없는 빈에서 오류가 발생합니다.

UPDATE :

//style={prepareStyles(carouselItemStyle)} 
return (<div><img src={image}/></div>) 

이미지가 표시되지만 전체 폭 아니다 : 나는 a 태그의 스타일을 제거하고 divCarouselItem 내에서이를 변경하는 경우

. 나는 을 사용하여 transform css와 height을 결정했습니다. CarouselItem의 올바른 스타일을 어떻게 정할 수 있습니까?

Answer 1

문제는 helloWorld.js에 있다고 생각합니다. 구성 요소가 올바르게 작성되지 않았습니다. 이것으로 바꾸면 이미지가 렌더링됩니다.

export default class HelloWorld extends React.Component { 
    render() { 
    const items = [ 
    'http://estruct.com.au/wp-content/uploads/2014/10/old-gccc-logo.png', 
    'http://www.activehealthycommunities.com.au/wp-content/uploads/2014/07/City-of_Gold-Coast_stacked_CMYK-01.jpg' 
    ] 
    return (
    <MuiThemeProvider> 
     <Carousel items={items} autoplay={true}/> 
    </MuiThemeProvider> 
); 
    } 
}