ReactJS组件使用Bootstrap轮播图时函数组件refs报错求助

问题场景 #

在React项目中批量导入图片，通过Bootstrap的Carousel组件实现轮播。直接编写<Carousel.Item>子组件时正常运行，但使用自定义的Items组件包裹批量生成的Carousel.Item时，出现以下错误：

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

原代码如下：

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时正常 */}
      {/* <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 Bootstrap的Carousel组件需要给它的**直接子组件（即Carousel.Item）**传递ref，以此实现轮播的状态控制、切换逻辑等核心功能：

• 直接使用Carousel.Item时，该组件内部已经通过React.forwardRef()处理过，能够正常接收并使用ref；
• 自定义的Items是普通函数组件，默认不支持接收ref，当Carousel尝试给它传递ref时就会触发报错。

解决办法 #

方案1：移除自定义组件，直接在Carousel内渲染映射结果 #

这是最简洁的方案，直接把图片映射生成Carousel.Item的逻辑放到MyCarousel组件中，让Carousel.Item成为Carousel的直接子元素：

import Carousel from 'react-bootstrap/Carousel';

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((imgSrc, index) => (
        <Carousel.Item key={index}>
          <img 
            className="slide-image d-block" 
            src={imgSrc} 
            alt={`轮播图 ${index + 1}`} 
          />
        </Carousel.Item>
      ))}
    </Carousel>
  );
}

export default MyCarousel;

方案2：用React.forwardRef()包装自定义组件（不推荐） #

如果一定要保留自定义Items组件，可以通过React.forwardRef()将接收到的ref转发给内部的Carousel.Item（仅给第一个轮播项传递ref，匹配Carousel的内部逻辑）：

import Carousel from 'react-bootstrap/Carousel';
import React, { forwardRef } from 'react';

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

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

const Items = forwardRef((_, ref) => {
  return (
    <>
      {images.map((imgSrc, index) => (
        <Carousel.Item 
          key={index} 
          ref={index === 0 ? ref : null}
        >
          <img 
            className="slide-image d-block" 
            src={imgSrc} 
            alt={`轮播图 ${index + 1}`} 
          />
        </Carousel.Item>
      ))}
    </>
  );
});

function MyCarousel() {
  return (
    <Carousel fade interval={null}>
      <Items />
    </Carousel>
  );
}

export default MyCarousel;

推荐方案1，因为自定义Items组件在这里仅做了简单的映射逻辑，额外封装反而增加了复杂度，直接在Carousel内渲染更直观且避免ref问题。

内容的提问来源于stack exchange，提问作者Caio m. silva