Question

我正在遵循这种依赖关系的步骤： http://jossmac.github.io/react-images/

这是行不通的。没有图片显示，并且显示错误消息：

index.js：2178警告：道具类型失败：道具onClose被标记按照Lightbox的要求，但其值为undefined

这是我的代码：

import React, { Component } from "react";
import Lightbox from "react-images";

const URL_INTERIORES = "http://localhost:3001/interiores";

const LIGHTBOX_IMAGE_SET = [
  {
    src: "/images/int_02.jpg",
    caption: "A forest",
    // As an array
    srcSet: ["/images/int_02.jpg", "/images/int_02.jpg"]
  },
  {
    src: "/images/int_02.jpg",
    // As a string
    srcSet: "/images/int_02.jpg 1024w, /images/int_02.jpg 800w, /images/int_02.jpg 500w, /images/int_02.jpg 320w"
  }
];

class Interiores extends Component {
  render() {
    const { open } = this.state;
    return (
      <div>
        <div>
          <Lightbox
            images={LIGHTBOX_IMAGE_SET}
            isOpen={this.state.lightboxIsOpen}
            onClickPrev={this.gotoPrevLightboxImage}
            onClickNext={this.gotoNextLightboxImage}
            onClose={this.closeLightbox}
          />
        </div>
      </div>
    );
  }
}

export default Interiores;

有人知道如何解决吗？谢谢你

Answer 1

考虑在您的课程中添加所有缺少的处理程序和状态：

class MyTest extends Component {
  state = { flag: true };

  changeColor = () => {
    this.setState(previousState => {
      return { flag: !previousState.flag };
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={{ flex: 1, backgroundColor: "#888888", margin: 20 }}
          onPress={this.changeColor}
        >
          <Text style={{ color: this.state.flag ? "red" : "blue" }}>One</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

我无法在React上实现灯箱图库

1 个答案: