Question

我正在使用react-images和react-photo-gallery创建灯箱画廊，但尝试动态提取数据集。为了不必重复执行多次代码，我需要在通过Object.assign重新分配的对象的末尾添加一个名为ProjectId的prop值。

每个图库都有自己的组件文件，我将分别导入。 ProjectId是从props传递的，具体取决于在另一个组件中单击了哪个项目。我正在使用Object.assign将对象移动到一个空数组中，然后可以在组件中调用它。通过使用if语句，我可以分配哪个图库调用哪个数据集，但是必须有一种更简单的方法。

我尝试了六个串联的组合，以将prop添加到Object.assign中的第二个值上，而没有任何运气。我还使用传播运算符简要地尝试了同样的事情。

import React, { useState } from 'react';
import Carousel, { Modal, ModalGateway } from "react-images";
import Gallery from "react-photo-gallery";
import { finalImages1 } from '../data/finalImagesData/finalImages1';
import { protoImages1 } from '../data/protoImagesData/protoImages1';
import { finalImages2 } from '../data/finalImagesData/finalImages2';
import { protoImages2 } from '../data/protoImagesData/protoImages2';

const ImageGallery = (props) => {
    const [currentImage, setCurrentImage] = useState(0);
  const [viewerIsOpen, setViewerIsOpen] = useState(false);
  let dataSet = [];

  const openLightbox = (event, obj) => {
    setCurrentImage(obj.index);
    setViewerIsOpen(true);
  };
  const closeLightbox = () => {
    setCurrentImage(0);
    setViewerIsOpen(false);
  };


  if(props.dataSet === 'finalImages' && props.projectId === 1) {
        let returnDataSet = Object.assign(dataSet, finalImages1);
    } else if(props.dataSet === 'protoImages' && props.projectId === 1) {
        let returnDataSet = Object.assign(dataSet, protoImages1);
    } else if(props.dataSet === 'finalImages' && props.projectId === 2) {
        let returnDataSet = Object.assign(dataSet, finalImages2);
    } else if(props.dataSet === 'protoImages' && props.projectId === 2) {
        let returnDataSet = Object.assign(dataSet, protoImages2);
    };

    return (
        <React.Fragment>
            <Gallery photos={dataSet} direction={"column"} onClick={openLightbox} />
            <ModalGateway>
          {viewerIsOpen ? (
            <Modal onClose={closeLightbox}>
              <Carousel
                currentIndex={currentImage}
                views={dataSet.map(x => ({
                  ...x,
                  srcset: x.srcSet
                }))}
              />
            </Modal>
          ) : null}
        </ModalGateway>
    </React.Fragment>
    );
};

export default ImageGallery;

我想结束这样的事情：

  if(props.dataSet === 'finalImages') {
        let returnDataSet = Object.assign(dataSet, `finalImages+${props.projectId}`);
    } else if(props.dataSet === 'protoImages') {
        let returnDataSet = Object.assign(dataSet, `protoImages+${props.projectId}`);
    };

每当我尝试执行类似操作时，组件都将找不到数据。

Answer 1

这与属性或Object.assign无关。

您要寻找的是为要扩展数据集的对象动态选择变量名，并且您将使用

eval(props.dataSet + props.projectId)

为此。但是eval是一个可怕的想法，而是使用适当的查找结构：

import { finalImages1 } from '../data/finalImagesData/finalImages1';
import { protoImages1 } from '../data/protoImagesData/protoImages1';
import { finalImages2 } from '../data/finalImagesData/finalImages2';
import { protoImages2 } from '../data/protoImagesData/protoImages2';

const dataSets = {
    finalImages: {
        1: finalImages1,
        2: finalImages2,
    },
    protoImages: {
        1: protoImages1,
        2: protoImages2,
    },
};

（您可能希望将此对象放入../data/index.js中，然后从那里导入）。

有了这种结构，您可以简单地使用

const ImageGallery = (props) => {
    const dataSet = dataSets[props.dataSet][props.projectId];
    …

将道具连接到Object.assign

1 个答案: