Question

我正在尝试为每个缩略图添加样式，我一直在阅读文档，我想我应该使用“ tumbnailStyle”属性-但是我不知道应该如何添加className和哪个属性？

我确实浏览了“ this”对象的属性，但看不到任何可以附加我的课程的东西。

import React, { Component } from "react";
import Gallery from "react-grid-gallery";
import "./wings.css";

let IMAGES = [];

class wings extends Component {
  state = {
    files: [
      "a",
      "b",
      "c"
    ]
  };
  addToImages(files) {
    for (let i = 0; i < files.length; i++) {
      IMAGES = [
        ...IMAGES,
        {
          src: process.env.PUBLIC_URL + "/gfx/" + files[i] + ".jpg",
          thumbnail:
            process.env.PUBLIC_URL + "/gfx/" + files[i] + ".jpg",
          tags: [
          ],
          caption: ""
        }
      ];
    }
  }
  constructor() {
    super();
    this.addToImages(this.state.files);
  }
  styleSmall(param) {
    console.log(param); //how to style 


  }

  render() {
    return (
      <div className="container gallery-wrapper">
        <Gallery
          images={IMAGES}
          enableImageSelection={false}
          thumbnailStyle={this.styleSmall(this)}
        />
      </div>
    );
  }
}

export default wings;

Answer 1

thumbnailStyle是必须传递（不执行）的函数，并且在调用时将返回具有css属性的对象，该对象将通过style属性（而不是类名）应用。

类似

<Gallery
      images={IMAGES}
      enableImageSelection={false}
      thumbnailStyle={this.styleSmall}
    />

styleSmall就像

styleSmall(){
   return ({
      border:'5px solid red'
   });
}

如何为react-grid-gallery组件中的每个缩略图设置样式

1 个答案: