更新：

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 我在开发环境中没有垃圾箱中的错误。

更新：

如果删除a代码的样式并将其更改为div内的CarouselItem：

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

使用ReactSwipeableViews构建的轮播不显示项目

更新：

1 个答案: