是否可以将 React 组件存储在数组中？

Question

我正在尝试修改下面列出的代码。它被设计为使用键循环遍历数组的元素，以使用直接发布到文档中的长 SVG 文件（由“SomelongUglySVG”表示）查找图像。

由于 SVG 占用大量空间，并且如果全部放在一起会使文件膨胀，因此我想将每个 SVG 保存为单独的 React 组件，然后将它们导入到单个布局中。我已经测试了这些组件，它们都在布局中成功渲染，但是当我尝试将它们放入数组中时，它们没有渲染。

Tl;Dr基本上，如果将组件存储在数组中并通过函数循环它们不可行，那么通过函数循环反应组件的最佳方法是什么？

基本代码：

   const items = [
  {
    src: 'SomelongUglySVG',
    altText: 'Slide 1',
    caption: 'Slide 1'
  },
  {
    src: 'SomeLongUglySVG',
    altText: 'Slide 2',
    caption: 'Slide 2'
  },
  {
    src: 'SomeLongUglySVG',
    altText: 'Slide 3',
    caption: 'Slide 3'
  }
];

--为了简洁起见，修剪了中间的代码--

const slides = items.map((item) => {
      return (
        <CarouselItem
          onExiting={this.onExiting}
          onExited={this.onExited}
          key={item.src}
        >
          <img src={item.src} alt={item.altText} />
          <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
        </CarouselItem>
      );
    });

我想使用的代码：

  const items = [
  {
    src: <SVGcomponent1>,
    altText: 'Slide 1',
    caption: 'Slide 1'
  },
  {
    src: <SVGcomponent2>,
    altText: 'Slide 2',
    caption: 'Slide 2'
  },
  {
    src: <SVGcomponent3>,
    altText: 'Slide 3',
    caption: 'Slide 3'
  }
];

const slides = items.map((item) => {
  return (
    <CarouselItem
      onExiting={this.onExiting}
      onExited={this.onExited}
      key={item.src}
    >
      <img src={item.src} alt={item.altText} />
      <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
    </CarouselItem>
  );
});

--为了简洁起见，在这里删除了多余的代码--

const slides = items.map((item) => {
      return (
        <CarouselItem
          onExiting={this.onExiting}
          onExited={this.onExited}
          key={item.src}
        >
          <img src={item.src} alt={item.altText} />
          <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
        </CarouselItem>
      );
    });

Answer 1

当然。

如果您想传递组件的实例，那么您所做的一切都很好，只是您需要关闭这些 JSX 标记：

{
  src: <SVGComponent1 />,
  ...

或者，如果您想传递组件类/函数本身：

{
  src: SVGComponent1,
  ...

不过，您在使用中想要做什么并不完全清楚——您希望通过将组件传递给标签src的属性来实现什么目的img？

也许这是您忘记更新已传递组件的旧代码，您的意思是：

  const slides = items.map((item, index) => {
      return (
        <CarouselItem
          onExiting={this.onExiting}
          onExited={this.onExited}
          key={index}
        >
          {item.src}
          <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
        </CarouselItem>
      );
    });

当传递组件实例时，这应该可以正常工作。

请注意，我还更改了该key属性，因为我不确定将组件传递给该属性是否有效！