0

我正在尝试使用and来实现这个轮播。material-uireact-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>
        )
    }
}

我有一个轮播组件，如下所示：

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

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

我用我的开发环境中没有的 bin 中的代码创建了一个webpackbin 。

更新：

如果我删除a标签的样式并将其更改为divwithin CarouselItem：

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

图像显示但不是全宽。我注意到transformcss 以及height使用jQuery. 我们如何为CarouselItem.

4

1 回答 1

0

我认为问题出在你的 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>
  );
  }
}
于 2016-09-06T00:28:43.257 回答