iDangero.us組隊，探索和作出反應 - 處理動態數據

我有關於實施iDangero.us組隊，探索與反應的問題。我一直在玩它一段時間，我的問題是，實際的滑動不適用於我處理動態數據的情況。讓我來舉例說明這一點。iDangero.us組隊，探索和作出反應 - 處理動態數據

我的代碼是由以下列方式：

1）我有一個名爲SwiperComponent組件。有兩部分 - 方法componentDidMount（），其中我把Swiper組件的初始化和render（）一個生成由iDangero.us Swiper定義的結構的地方。

var SwiperComponent = React.createClass({ 
    componentDidMount() { 
    this.swipe = new Swiper(React.findDOMNode(this), { 
     slidesPerView: 3, 
     centeredSlides: true, 
     spaceBetween: 10 
    }); 
    }, 

    render() { 
    return React.createElement('div', React.__spread({}, this.props, {className: 'swiper-container'}), 
     React.createElement('div', {className: 'swiper-wrapper'}, 
     React.Children.map(this.props.children, function (child, index) { 
      return React.createElement('div', {className: 'swiper-slide'}, React.cloneElement(child)); 
     }) 
    ) 
    ); 
    } 
});

2）I具有其中I製備在我簡單地創建我與某些圖像填充的陣列的方式「的動態內容」的簡單Index.jsx文件。

var Index = React.createClass({ 

    getInitialState: function() { 
    return { 
     movies: [] 
    }; 
    }, 

    componentDidMount() { 
    this.setState({ 
     movies: ["http://www.themusehotel.com/design/images/930-481/nyc-skyline.jpg", "https://ephemeralnewyork.files.wordpress.com/2010/08/broadway47thstreet2010.jpg", "http://41.media.tumblr.com/27d14da3be1e02eb7b6ead5bda0ac1b2/tumblr_n5dqi4XDz61qdeuyro1_1280.jpg", "http://photos.cntraveler.com/2014/09/29/5429c32b425f183f61bf7316_new-york-city-skyline.jpg"], 
    }); 
    }, 


    render: function() { 
    var items = this.state.movies; 

    return (
     <SwiperComponent> 
     { 
     items.map((item) => { 
      return (
      <img src={item} width="100%" height="200"/> 
     ) 
     }) 
     } 
     </SwiperComponent> 
    ) 
    } 
});

正如我所提到的，問題是滑動部分不起作用。非常有趣的是，一旦我在Chrome中打開開發者控制檯或者刷出數組並放置一些靜態標籤，它就開始工作。

我準備的jsfiddle在這裏你可以看到在行動這個問題 - https://jsfiddle.net/4z3zyk07/4/

有誰知道我已經失蹤，做錯了什麼？我會很感激你的幫助。非常感謝你！

拉狄克

來源

2015-10-01 Radek Tomasek

這是因爲你用this.setState來填補你的陣列電影的"componentDidMount"

當外componentDidMount被稱爲生命週期內componentDidMount已經被調用，此時您的Swiper沒有找到任何圖片，因此無法爲每張圖片計算出正確的寬度。

在componentWillMount中初始化您的圖片數據。

componentWillMount() { 
    this.setState({ 
     movies: [your pictures], 
    }); 
    },

然後Swiper會知道盒子裏有多少圖像並計算每個人的寬度。

來源

2016-09-26 03:40:46 user5474476

iDangero.us組隊，探索和作出反應 - 處理動態數據

回答

相關問題