Question

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

因为SVG会占用大量空间并且如果将所有文件放在一起会使文件膨胀，我想将每个SVG保存为单独的反应组件，然后将它们导入到单个布局中。我测试了组件，它们都在布局中成功渲染，但是当我尝试将它们放在数组中时，它们不会被渲染。

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属性，因为我不确定将组件传递给它会起作用！

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

1 个答案: