Question

所以，我已经学习React一段时间了，正在制作一个网站。我想包含一个包含缩略图库的灯箱，当您单击它时会放大它。

我发现了这个线程https://www.reddit.com/r/reactjs/comments/8ubdsn/does_anyone_know_of_a_simple_image_gallery/。

其中很多链接都是我想要的，但我似乎无法使它们正常工作。例如，第一个提到的https://github.com/benhowell/react-grid-gallery。带有此代码的“快速且肮脏的开始”选项。

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')
);

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



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

            )
        }
}

因此，我可以将其包含在App.js主文件中的任何位置，也可以通过导入并键入<ExampleComponent />来包含它。

那么，如果我要将“ Quick and Dirty”代码转换为可以在其他文件中使用的组件，该怎么办？就像，我不知道const IMAGES应该放在哪里，或者渲染/返回应该放在哪里。

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

任何帮助将不胜感激！

Answer 1

Gallery组件本身就是一个组件，因此您可以在必要时直接在App中使用它。如果您确实想使其成为自己的组件，并且其格式包含以下图片，则可以执行以下操作。

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}/>
    )
  }
}

或者，如果您希望使用一种更具可读性的方法，则不必使用Class组件。您可以像这样使用Function组件：

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} />
  )
}

无法弄清楚如何使用我在网上找到的此灯箱组件

1 个答案: