Question

我有一个问题，我尝试通过以下示例在一个类中转换此函数： https://codesandbox.io/s/5vn3lvz2n4

但是，我遇到了一个错误。这是代码：

import React, { Component, useCallback } from "react";
import Gallery from "react-photo-gallery";
import Carousel, { Modal, ModalGateway } from "react-images";

class Gallerie extends Component {

  constructor(props){
    super(props)

    this.state = {
      currentImage: 0,
      setCurrentImage: 0,
      viewerIsOpen: false,
      setViewerIsOpen: false,
    }   
}

  render(){
    const openLightbox = useCallback((event, { photo, index }) => {
      this.state.setCurrentImage(index);
      this.state.setViewerIsOpen(true);
    }, []);

    const closeLightbox = () => {
      this.state.setCurrentImage(0);
      this.state.setViewerIsOpen(false);
    };

    return (
      <div>
        <Gallery photos={this.props.photos} onClick={() => openLightbox} />
        <ModalGateway>
          {this.state.viewerIsOpen ? (
            <Modal onClose={() =>closeLightbox}>
              <Carousel
                currentIndex={this.state.currentImage}
                views={this.props.photos.map(x => ({
                  ...x,
                  srcset: x.srcSet,
                  caption: x.title
                }))}
              />
            </Modal>
          ) : null}
        </ModalGateway>
      </div>
    );
  }
}

export default Gallerie;

问题出在这里，我得到了什么：

我不知道useCallBack做什么。如果我只复制/粘贴示例，它就可以工作。问题是变量“ photos”用作道具，因为每个用户它都会不同。因此，我需要将其用于其他组件。如果我使用类似示例的功能，则无法使用道具...

感谢您的帮助。

Answer 1

您正在基于conda的{{1}}中使用apt。首先将其转换为功能组件

yum

React中具有useCallback的无效钩子调用

1 个答案: