使用ReactSwipeableViews构建的旋转木马不显示项目

Question

我正在尝试使用material-ui和react-swipeable-views来实现this carousel。

我有一个旋转木马项目，看起来像这样：

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

我有一个看起来像这样的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>
        )
    }
}

我像这样使用Carousel：

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

我发现轮播项目没有出现，当我查看开发人员工具时，我发现正在发生转换，但我看不到这些项目。

我已经创建了一个webpackbin with the code，我在我的开发环境中没有的bin中得到一个错误。

更新：

如果我删除a标记的样式并在CarouselItem中将其更改为div

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

将显示图像，但不是全宽。我注意到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>
  );
  }
}