React 中的 Galleria dom 操作答案

【问题标题】：Galleria dom manipulation in ReactReact 中的 Galleria dom 操作
【发布时间】：2020-05-20 10:22:18
【问题描述】：

我正在尝试在 Reactjs 中使用 Galleria 插件实现图像库，现在写我已经使用 npm 包 Galleria，jQuery 在组件内部使用，并且我正在将根节点的引用传递给 Galleria 运行函数。但是，我还是看不到图片库，请告诉我，这里有什么问题。

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```

【问题讨论】：

不熟悉这个包，但是使用 jQuery 和 React 不是一个好主意。 React 在内部处理所有 DOM 操作，使用 jQuery 自己操作元素可能会产生冲突和意外行为。我不确定你到底想要完成什么，但我肯定会推荐一个仅 React 的解决方案。我通过快速的 Google 找到了这个 image gallery package 用于 React，我确信有一些工具可以通过一些修改来完成你需要的东西。

标签： reactjs dom dom-manipulation galleria

【解决方案1】：

是的，克里斯，但现在我们的情况接近交付，我刚刚加入团队，我对 react 中的裁判不太熟悉

【讨论】：