Reactjs Can'；我不知道如何使用我在网上找到的灯箱组件

所以，我学习React已经有一段时间了，我正在制作一个网站。我想包括一个灯箱，有一个缩略图像画廊，当你点击一个它放大

我找到了这根线

很多链接的都是我想要的，但我似乎无法让它们工作。比如说上面提到的第一个,。它有一个“快速脏启动”选项，代码如下

import { render } from 'react-dom';
import Gallery from 'react-grid-gallery';

const IMAGES =
[{
        src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg",
        thumbnail: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg",
        thumbnailWidth: 320,
        thumbnailHeight: 174,
        isSelected: true,
        caption: "After Rain (Jeshu John - designerspics.com)"
},
{
        src: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg",
        thumbnail: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_n.jpg",
        thumbnailWidth: 320,
        thumbnailHeight: 212,
        tags: [{value: "Ocean", title: "Ocean"}, {value: "People", title: "People"}],
        caption: "Boats (Jeshu John - designerspics.com)"
},

{
        src: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_b.jpg",
        thumbnail: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_n.jpg",
        thumbnailWidth: 320,
        thumbnailHeight: 212
}]

render(
        <Gallery images={IMAGES}/>,
        document.getElementById('example-0')
); 

从'react dom'导入{render}；
从“反应网格库”导入库；
常量图像=
[{
src:“https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg",
缩略图：“https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg",
指钉宽度：320，
拇指指甲高度：174，
是的，
描述：“雨后（Jeshu John-designerspics.com）”
},
{
src:“https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg",
缩略图：“https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_n.jpg",
指钉宽度：320，
拇指指甲高度：212，
标签：[{value:“Ocean”，title:“Ocean”}，{value:“People”，title:“People”}]，
描述：“船只（Jeshu John-designerspics.com）”
},
{
src:“https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_b.jpg",
缩略图：“https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_n.jpg",
指钉宽度：320，
拇指指甲高度：212
}]
渲染(
,
document.getElementById（'example-0'）
); 

现在，通常当我制作一个组件时，它看起来像这样

export default class ExampleComponent extends React.Component {
  render() {
    return (
            <div>
                  <img src="http://i.huffpost.com/gen/749263/original.jpg"/>
            </div>

            )
        }
}

导出默认类ExampleComponent扩展React.Component{
render（）{
返回(
)
}
}

这样，我就可以在我的主App.js文件中的任何地方包含它，或者通过导入并键入

将其包含在任何地方

因此，如果我要将“快速而肮脏”的代码转换成一个可以在其他文件中使用的组件，我该如何做？比如，我不知道常量图像应该去哪里，或者渲染/返回应该去哪里

我只想能够使用该组件并将图像URL更改为我想要的。我现在不需要对它做任何花哨的事情

---

任何帮助都将不胜感激

Gallery组件本身就是一个组件，因此您可以在需要时直接在

应用程序中使用它。若你们真的想让它成为自己的组件，包含你们格式的图片，你们可以这样做

export default class ExampleComponent extends React.Component {

  // variable declaration will be placed in the constructor.
  constructor() {
    super();
    this.IMAGES =
      [{
        src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg",
        thumbnail: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg",
        thumbnailWidth: 320,
        thumbnailHeight: 174,
        isSelected: true,
        caption: "After Rain (Jeshu John - designerspics.com)"
      },
      {
        src: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg",
        thumbnail: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_n.jpg",
        thumbnailWidth: 320,
        thumbnailHeight: 212,
        tags: [{value: "Ocean", title: "Ocean"}, {value: "People", title: "People"}],
        caption: "Boats (Jeshu John - designerspics.com)"
      },
      {
        src: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_b.jpg",
        thumbnail: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_n.jpg",
        thumbnailWidth: 320,
        thumbnailHeight: 212
      }]; 
  }

  //You can than use your variable using this.variableName in your render method.
  render() {
    return (
      <Gallery images={this.IMAGES}/>
    )
  }
}

看起来很好，谢谢你，鲁兹。现在正在工作，但我回家后会试试。太好了，让我知道它是否有效，或者你是否需要更多的指导，我很乐意帮助你。谢谢你，这正是我想要的！现在我可以随心所欲地使用灯箱了。太好了，很高兴我能帮上忙，你能把我的问题标为“接受答案”并投赞成票吗？这也会帮助我获得一些声誉。我很乐意，但不幸的是，因为我的声誉低于15，我不能。
const exampleComponent = () => {
  const IMAGES =
    [{
      src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg",
      thumbnail: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg",
        thumbnailWidth: 320,
        thumbnailHeight: 174,
        isSelected: true,
        caption: "After Rain (Jeshu John - designerspics.com)"
    },
    {
      src: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg",
      thumbnail: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_n.jpg",
        thumbnailWidth: 320,
        thumbnailHeight: 212,
        tags: [{value: "Ocean", title: "Ocean"}, {value: "People", title: "People"}],
        caption: "Boats (Jeshu John - designerspics.com)"
    },
    {
      src: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_b.jpg",
      thumbnail: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_n.jpg",
        thumbnailWidth: 320,
        thumbnailHeight: 212
    }];

  return (
    <Gallery images={IMAGES} />
  )
}