用 react-image-gallery 反应 jsfiddle

问题描述

我正在尝试设置一个 React JSFiddle 以包含 react-image-gallery。

使用 UNPKG 我已成功链接到包：

https://unpkg.com/browse/react-image-gallery@1.0.8/

我仍然坚持以下几点：

1. 我想我应该引用包中的 .js 文件，但不清楚是哪个？
2. 在小提琴中，我应该使用资源选项，还是应该包含一个标签？

HTML 是：

<script src="https://unpkg.com/react-image-gallery@1.0.8/build/image-gallery.js"></script>
<div id="app"></div>

React JS 是：

const images = [
      {
        original: 'https://picsum.photos/id/1018/1000/600/',thumbnail: 'https://picsum.photos/id/1018/250/150/',},{
        original: 'https://picsum.photos/id/1015/1000/600/',thumbnail: 'https://picsum.photos/id/1015/250/150/',{
        original: 'https://picsum.photos/id/1019/1000/600/',thumbnail: 'https://picsum.photos/id/1019/250/150/',];

class ReactImageGalleryTest extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        items: []
    }
  }
  
  render() {
    return (
      <div>
        <ImageGallery 
          showThumbnails={true}
          items={images} 
        />
      </div>
    )
  }
}

ReactDOM.render(<ReactImageGalleryTest />,document.querySelector("#app"))

小提琴：https://jsfiddle.net/k_ahn/rkbteajL/34/

解决方法

jsfiddle for react 不是用户友好的 IMO，请尝试使用 codeandbox.io

我接受了您的代码，这是一个工作示例：

https://codesandbox.io/s/modest-ramanujan-tth2w?file=/src/components/react-image-gallery-test.js

文档没说，但是还需要导入css，示例中可以看到。

如果您真的需要在 jsfiddle 中实现此功能，请告诉我，我会拔出一些头发并试一试。