使用 react-image-gallery 反应 jsfiddle

Question

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

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

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

我仍然坚持以下几点：

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

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"))

Fiddle: https://jsfiddle.net/k_ahn/rkbteajL/34/

Answer 1

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

我获取了你的代码，这里是一个工作示例：

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

文档上没有说，但是你还需要导入css，你可以在例子中看到。

如果你真的需要让这个在 jsfiddle 中工作，请告诉我，我会抽出一些头发来试一试。

使用 react-image-gallery 反应 jsfiddle

React jsfiddle with react-image-gallery

npm

jsfiddle

reactjs