【问题标题】：Component in ReactJS fails to load imagesReactJS 中的组件无法加载图像
【发布时间】：2023-01-19 15:51:12
【问题描述】：

我的 React 项目的目录中有一些图像，在我的组件中，我试图导入所有这些图像并使用 Bootstrap 在轮播中显示它，这是当前代码：

import Carousel from 'react-bootstrap/Carousel';

const slideImagesFolder = '../../img/main slider/';

function importAll(r) {
  return r.keys().map(r);
}

const images = importAll(require.context('../../img/main slider/', false, /\.(png|jpe?g|svg)$/));

const Items = () => {
    return images.map((e, i) => (
      <Carousel.Item key={i}><img className="slide-image d-block" src={e} alt="" /></Carousel.Item>
    ))
}


function MyCarousel() {
  return (
    <Carousel fade interval={null}>
      {/* <Carousel.Item>
        <img
          className="d-block"
          src={images[0]}
          alt="First slide"
        />
      </Carousel.Item>
      <Carousel.Item>
        <img
          className="d-block"
          src={images[1]}
          alt="Second slide"
        />
      </Carousel.Item>
      <Carousel.Item>
        <img
          className="d-block"
          src={images[2]}
          alt="Third slide"
        />
      </Carousel.Item> */}
      <Items/>
    </Carousel>
  );
}

export default MyCarousel;

我收到此错误：“无法为函数组件提供引用。尝试访问此引用将失败。您是要使用 React.forwardRef() 吗？” 我不知道为什么，但如果我注释“<Items/>”行并取消注释上面的行，它就可以工作，我不知道为什么它的工作方式不同。

【问题讨论】：

标签： javascript html reactjs bootstrap-5

【解决方案1】：

问题

Carousel 组件将引用附加到它正在渲染的子项上，例如Carousel.Item 通常，因此它可以采用 DOM 测量来处理 UI 的布局/定位。

这种方法有两个问题：

Images 没有转发传递给它的任何 ref。

Images 需要为它呈现的每个 Carousel.Item 组件接收一个 React ref。这是行不通的，因为 Image 是 Carousel 的唯一孩子，只能转发一个 ref。

解决方案

无需创建另一个呈现 Carousel.Item 组件的 React 组件，只需将它们直接映射为子组件即可。

例子：

import Carousel from 'react-bootstrap/Carousel';

const slideImagesFolder = '../../img/main slider/';

function importAll(r) {
  return r.keys().map(r);
}

const images = importAll(require.context('../../img/main slider/', false, /.(png|jpe?g|svg)$/));

function MyCarousel() {
  return (
    <Carousel fade interval={null}>
      {images.map((src, i) => (
        <Carousel.Item key={i}>
          <img className="slide-image d-block" src={src} alt="" />
        </Carousel.Item>
      ))}
    </Carousel>
  );
}

export default MyCarousel;

【讨论】：