javascript - 如何使lightslider jquery插件在reactjs组件中工作？

Question

这是我渲染光 slider 画廊的代码。我的问题是 jquery 库无法正确显示。它只渲染照片，但不渲染样式。我在渲染开始之前阅读了有关 componentDidMount 安装的内容。 垂直列表上的标记是如何使用lightslider gallery的方式。

您认为问题出在哪里？我们如何使用jquery插件然后通过reactjs组件渲染它？

render(){
    const photodata = this.props.gallery;
    const datax = photodata.data;

    return(
        <div>
            {datax.map(function(object,i){
                let standardprops = object.properties;
                let photos = standardprops.Photos;

                {
                    return(
                        object.properties.Photos.map(function(fields){
                            let photo = fields.photos;
                            let thumb = fields.thumbnail;

                            return (
                                <ul id="vertical">
                                    <li key={fields.i} data-thumb={thumb} data-src={photo}>
                                        <img src={photo} className="img-responsive" />
                                    </li>
                                </ul>
                            )
                        })
                    )
                }

            })}    
        </div>
    )
}

Answer 1

阅读有关 componentDidMount 的文档后，我提出了这个解决方案。我也是从 Nerd 网站上得到的，它是:https://egghead.io/lessons/react-using-react-with-the-fullcalendar-jquery-plugin

componentDidMount(){

    const {vertical} = this.refs;  

    $(vertical).lightSlider({
        gallery:true,
        item:1,
        slideMargin:0,
        speed:500,
        auto:false,
        loop:true,
        adaptiveHeight:true,
        vertical:true,
        verticalHeight:600,
        vThumbWidth:220,
        thumbItem:4,
        thumbMargin:5,
        onSliderLoad: function(el) {
            el.lightGallery({
                selector: '.vertical .lslide'
            });
        },
        responsive : [
            {
                breakpoint:1025,
                settings: {
                    item:1,
                    slideMove:1,
                    gallery:true,
                    thumbItem:8,
                    vThumbWidth:120
                }
            },
            {
                breakpoint:769,
                settings: {
                    item:1,
                    slideMove:1,
                    gallery:true,
                    thumbItem:8,
                    vThumbWidth:100,
                    verticalHeight:450
                }
            },
            {
                breakpoint:737,
                settings: {
                    item:1,
                    slideMove:1,
                    gallery:false,
                    thumbItem:0,
                  }
            },
            {
                breakpoint:668,
                settings: {
                    item:1,
                    slideMove:1,
                    gallery:false,
                    thumbItem:0,
                  }
            },
            {
                breakpoint:641,
                settings: {
                    item:1,
                    slideMove:1,
                    gallery:false,
                    thumbItem:0,
                  }
            },
            {
                breakpoint:480,
                settings: {
                    item:1,
                    slideMove:1,
                    gallery:false,
                    thumbItem:0,
                }
            }
        ]   
    });
}

渲染现在也不同了。而不是将 ul 放在 map 内。我把它放在外面，用 refs 到 vertical

render(){
const photodata = this.props.gallery;
const datax = photodata.data;

return(
    <div>
        <ul ref="vertical">
        {datax.map(function(object,i){
            let standardprops = object.properties;
            let photos = standardprops.Photos;

            {
                return(
                    object.properties.Photos.map(function(fields){
                        let photo = fields.photos;
                        let thumb = fields.thumbnail;

                        return (

                                <li key={fields.i} data-thumb={thumb} data-src={photo}>
                                    <img src={photo} className="img-responsive" />
                                </li>

                        )
                    })
                )
            }

        })}
        </ul>   
    </div>
)}