ReactSwipeableViewsで構築されたカルーセルにはアイテムが表示されません

Question

this carouselをmaterial-uiとreact-swipeable-viewsを使用して実装しようとしています。

私はこのようになりますカルーセル項目があります。

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> 
     ) 
    } 
} 

私はこのようになりますカルーセルコンポーネントがあります。

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} /> 
) 

：

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> 
     ) 
    } 
} 

を私はこのようなCarouselを使用

カルーセル項目が表示されないことがわかりました。私が開発者ツールを見ると、私は見つけましたそのトランジションは起こっていますが、アイテムは表示されません。

私はwebpackbin with the codeを作成しました 私は自分の開発環境にはないビンにエラーが発生します。

UPDATE：

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

画像が表示されますが、全幅はありません。私はaタグのスタイルを削除し、divCarouselItem以内にそれを変更した場合

。私はtransformのCSSとheightがjQueryを使って決定されていることに気付きました。 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> 
); 
    } 
}