React中的画廊dom操作

问题描述 投票:0回答:1

我正在尝试在Reactjs中使用Galleria插件来实现图片库,现在我已经在组件内部使用了npm软件包Galleria,jQuery,并且正在将根节点的引用传递给Galleria run函数。但是,仍然看不到图片库,请让我知道,这是什么问题。

import React, { Component } from 'react';
import Galleria from 'galleria';
import $ from 'jquery';


class AssetImages extends Component{
    constructor(props){
        super(props);
    }

    componentDidMount(){

    }

    componentDidUpdate(){
        if(this.props.dataLakeImages.length !== 0){
            Galleria.run(this.rootNode);
        }
    }

    render(){
        return (
                    <div className="rs-assets-health-bg1">
                            <div className="content">
                                <div className="galleria" ref={node => (this.rootNode = node)}>
                                    <a href='https://img.wallpapersafari.com/desktop/1600/900/70/50/wIlBTm.jpg'>
                                        <img
                                            src='https://img.wallpapersafari.com/desktop/1600/900/70/50/wIlBTm.jpg'
                                            data-big='https://img.wallpapersafari.com/desktop/1600/900/70/50/wIlBTm.jpg'
                                            alt="Assets"
                                        />
                                    </a>
                                    <a href='https://img.wallpapersafari.com/desktop/1600/900/70/50/wIlBTm.jpg'>
                                        <img
                                            src='https://img.wallpapersafari.com/desktop/1600/900/70/50/wIlBTm.jpg'
                                            data-big='https://img.wallpapersafari.com/desktop/1600/900/70/50/wIlBTm.jpg'
                                            alt="Assets"
                                        />
                                    </a>
                                </div>/
                            </div>
                    </div>
        )
    }
}

export default AssetImages```
reactjs dom dom-manipulation galleria
1个回答
0
投票
© www.soinside.com 2019 - 2024. All rights reserved.