React - 如何将不同名称的道具传递给同一组件

Question

我有一个卡片组件接收 title、description 和 image 道具，但是我从两个不同来源收到的数据以不同方式标记了这些道具。

来源 1 (carouselContent):

[
  {
    "id": "1",
    "title": "title 1",
    "description": "Description text 1",
    "image": {
      "fluid": {
        "src": "/get-job-you-want.jpg?w=800&q=50"
      }
    }
  },
  {
    "id": "2",
    "title": "title 2",
    "description": "Description text 2",
    "image": {
      "fluid": {
        "src": "/framing-a-high-deck-1.jpg?w=800&q=50"
      }
    }
  }
]

这像这样传递到 <ImageSlider/> 组件：

<ImageSlider data={carouselContent} />

然后下一个来源 (relatedPrograms) 如下所示：

[
  {
    "fullProgramName": "title 1",
    "id": "1",
    "metaDescription": "description 1",
    "heroImage": {
      "fluid": {
        "src": "/denys-nevozhai-100695.jpg?w=350&h=196&q=50&fit=scale"
      }
    }
  },
  {
    "fullProgramName": "title 2",
    "id": "2",
    "metaDescription": "description 2",
    "heroImage": null
  }
]

并这样称呼： <ImageSlider data={relatedPrograms} />

我如何构造组件才能同时处理来自源 1 的 title 和 image 以及来自源 2 的 fullProgramName 和 heroImage ？

Answer 1

您可以在将数据作为 prop 传递给您的组件之前对其进行预处理或组合，或者您可以使用辅助 prop 并仅填充辅助数据源中的值。

const a =[
  {
    "id": "1",
    "title": "title 1",
    "description": "Description text 1",
    "image": {
      "fluid": {
        "src": "/get-job-you-want.jpg?w=800&q=50"
      }
    }
  },
  {
    "id": "2",
    "title": "title 2",
    "description": "Description text 2",
    "image": {
      "fluid": {
        "src": "/framing-a-high-deck-1.jpg?w=800&q=50"
      }
    }
  }
]

const b = [
  {
    "fullProgramName": "title 1",
    "id": "1",
    "metaDescription": "description 1",
    "heroImage": {
      "fluid": {
        "src": "/denys-nevozhai-100695.jpg?w=350&h=196&q=50&fit=scale"
      }
    }
  },
  {
    "fullProgramName": "title 2",
    "id": "2",
    "metaDescription": "description 2",
    "heroImage": null
  }
]

const c = []
a.forEach((val, idx) => {
    c.push({
        title: val.title,
        image: val.image,
        fullProgramName: b[idx].fullProgramName,
        heroImage: b[idx].heroImage
    });
})

然后您可以轻松地将数据副本传递给您的组件

Answer 2

这里有一个关于如何将两个数据源映射为具有共同形状的快速建议。显然，您需要修改它以包含对呈现图像的 ImageSlider 组件很重要的属性。在这里，我刚刚从您的示例数据中选择了几个字段。这里的重要特征是无论数据来自何处（轮播与相关），您都可以将它们转换为表示一组图像，其中它们的来源无关紧要并且它们与 ImageSlider 无法区分。 ImageSlider 可能只关心相关的图像数据，因此请确定代表您的基本图像数据的形状。

还有一个代码框：https://codesandbox.io/s/dank-morning-obwld

const normalizedCarousel = carouselContent.map((item) => ({
  id: item.id,
  name: item.title,
  src: item.image.fluid.src
}));

const normalizedRelated = relatedPrograms.map((item) => ({
  id: item.id,
  name: item.fullProgramName,
  src: item.heroImage?.fluid.src
}));

const ImageSlider = ({ header, data }) => {
  // This component now just renders a list with relevant props
  // but in the real app would render the slider.
  return (
    <>
      <h2>{header}</h2>
      <ul>
        {data.map((item) => {
          const { id, name, src } = item;
          return (
            <li>
              Id: {id}, Name: {name}, Src: {src}
            </li>
          );
        })}
      </ul>
    </>
  );
};

export default function App() {
  return (
    <>
      <ImageSlider header="Carousel" data={normalizedCarousel} />
      <ImageSlider header="Related" data={normalizedRelated} />
    </>
  );
}

React - 如何将不同名称的道具传递给同一组件

React - how to pass props with different names to same component

reactjs

react-props