如何解决用 react-image-gallery 反应 jsfiddle
我正在尝试设置一个 React JSFiddle 以包含 react-image-gallery。
使用 UNPKG 我已成功链接到包:
https://unpkg.com/browse/react-image-gallery@1.0.8/
我仍然坚持以下几点:
- 我想我应该引用包中的 .js 文件,但不清楚是哪个?
- 在小提琴中,我应该使用资源选项,还是应该包含一个标签?
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 中实现此功能,请告诉我,我会拔出一些头发并试一试。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。