为什么显示的什么都没有?

[wangluweb]

import React, { Component } from 'react';
import SlideShow from 'react-image-slideshow'

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            imgsData:[
                {
                    url: 'http://home.southcn.com/h/images/attachement/jpg/site4/20150421/78/9637386486099772286.jpg'
                },
                {
                    url: 'http://home.southcn.com/h/images/attachement/jpg/site4/20150421/28/12022616921377275384.jpg'
                },
                {
                    url: 'http://home.southcn.com/h/images/attachement/jpg/site4/20150421/28/12022616921377275384.jpg'
                }
            ]
        }
    };
    render() {
        return (
            <div >
                <h1>Hello</h1>
                <SlideShow imgs={this.state.imgsData} ref="SlideShow" />
            </div>
        );
    }
}

export default App;

[Caldis]

你调用一下 this.refs.SlideShow.handleModalOpen(index) 方法就可以显示出来了, index 是图片的序号

[wangluweb]

import React, { Component } from 'react';
import SlideShow from 'react-image-slideshow'

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            imgsData:[
                {
                    url: 'http://home.southcn.com/h/images/attachement/jpg/site4/20150421/78/9637386486099772286.jpg'
                },
                {
                    url: 'http://home.southcn.com/h/images/attachement/jpg/site4/20150421/28/12022616921377275384.jpg'
                },
                {
                    url: 'http://home.southcn.com/h/images/attachement/jpg/site4/20150421/28/12022616921377275384.jpg'
                }
            ]
        }
    };
    handleSlideshowOpen(index) {
        this.refs.SlideShow.handleModalOpen(index);
    }
    render() {
        return (
            <div >
                <h1>Hello</h1>
                <SlideShow imgs={this.state.imgsData} ref="SlideShow" onClick={this.handleSlideshowOpen.bind(this)}/>
            </div>
        );
    }
}

export default App;

使用这个也是显示不出来

使用componentDidMount,一直显示加载中

import React, { Component } from 'react';
import SlideShow from 'react-image-slideshow'

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            imgsData:[
                {
                    url: 'http://home.southcn.com/h/images/attachement/jpg/site4/20150421/78/9637386486099772286.jpg'
                },
                {
                    url: 'http://home.southcn.com/h/images/attachement/jpg/site4/20150421/28/12022616921377275384.jpg'
                },
                {
                    url: 'http://home.southcn.com/h/images/attachement/jpg/site4/20150421/28/12022616921377275384.jpg'
                }
            ]
        }
    };
    componentDidMount(index) {
        this.refs.SlideShow.handleModalOpen(index);
    }
    render() {
        return (
            <div >
                <h1>Hello</h1>
                <SlideShow imgs={this.state.imgsData} ref="SlideShow"/>
            </div>
        );
    }
}

export default App;