需要解释反应图像的工作原理

Question

我正在努力实现这一目标：http://jossmac.github.io/react-images/

我不明白如何显示图像以便用户可以点击它。有人可以通过代码向我介绍一下这是如何工作的？我一直试图在我自己的几天内解决这个问题而且我一直试图让图像渲染，所以我可以点击它来打开灯箱。

Answer 1

所以从链接：

<Lightbox
  images={[
    { src: '../images/photo-1.jpg' },
    { src: '../images/photo-2.jpg' }
  ]}
  isOpen={this.state.lightboxIsOpen}
  onClickPrev={this.gotoPrevLightboxImage}
  onClickNext={this.gotoNextLightboxImage}
  onClose={this.closeLightbox}
/>

Lightbox是反应组件的名称。所以你需要导入它：import Lightbox from 'react-images';

images，isOpen，onClickPrev，onClickNext，onClose是此组件的道具。这些是组件定义的特殊名称。左侧的括号表示您正在编写javascript。 {this.state.variable}引用一个组件状态，一个你必须在你正在制作的组件中定义的状态（例如Galery）。 {this.myfunction}指向一个名为＆＃39; myfunction＆＃39;在画廊。因此，您必须在组件中定义这些功能。

这只是一个快照。我挖了一下，在项目的github页面上找到了一个完整的例子。 here

您可以克隆存储库并在本地运行此示例。但我建议您使用create-react-app启动一个新应用，并将链接（Galery组件）中的代码粘贴到您的默认App组件中，并尝试使其工作，然后进行调整。< / p>

如果这对你来说没有任何意义，那么你可能还有一座名为“学习反应库”的山峰。

祝你好运。