Javascript 无法将道具从父组件传递给子组件

我正在使用typescript将父母的道具传递给孩子： 这是子组件

interface CarouselItemProps {
  interval: number;
  src: string;
  alt: string;
  title: string;
  p: string;
  btn: string;
}

const CarouselItem:FC<CarouselItemProps> = (props: CarouselItemProps) => {
  return (
    <>
      <Carousel.Item interval={props.interval}>
        <img
          className="d-block w-100 carousel-img"
          src={props.src}
          alt={props.alt}
        />
        <Carousel.Caption>
          <h1 className="carousel-title">{props.title}</h1>
          <p className="carousel-p">{props.p}</p>
          <Button variant="primary" className="btn-contact-us">
            {props.btn}
          </Button>
        </Carousel.Caption>
      </Carousel.Item>
    </>
  );
};

export default CarouselItem;

接口CarouselItemProps{
间隔：数字；
src：字符串；
alt：字符串；
标题：字符串；
p：字符串；
btn：字符串；
}
const CarouselItem:FC=（道具：CarouselItemProps）=>{
返回(
{props.title}
{props.p}
{props.btn}
);
};
导出默认的CarouselItem；

和父组件：

  <Carousel>
    <CarouselItem interval={1000} 
      src="/images/banner-home.png" 
      alt="First slide"
      title="A company with industrial network 4.0"
      p="We provide technology solutions that serve business and life
      demands in the time of the technology boom with a young and
      dynamic internal force to keep abreast of the development trend of
      information society"
      btn="Contact Us"
    />

但是我在父组件中的

src=“/images/banner home.png”

处得到了错误：

  <Carousel>
    <CarouselItem interval={1000} 
      src="/images/banner-home.png" 
      alt="First slide"
      title="A company with industrial network 4.0"
      p="We provide technology solutions that serve business and life
      demands in the time of the technology boom with a young and
      dynamic internal force to keep abreast of the development trend of
      information society"
      btn="Contact Us"
    />

键入“{interval:number；src:string；alt:string；title:string；p: string；btn:string；}不可分配给类型“intrinsitattributes” &省略&BsPrefixProps& 旋转木马&{…；}。类型上不存在属性“src” “内在的敬意& 省略&BsPrefixProps& 旋转木马&{…；}'

---

有人知道如何解决这个问题吗？

查看错误中的短语

属性“src”不存在于类型“intrinsitattributes…”

。我怀疑属性

src

是特定于HTML元素的，比如

img

，因此将此名称从

src

更改为其他名称可能会很好

尝试将界面中的

src

更改为

srcImage

，同时传递父组件

---

注意：这个答案没有经过测试。

我犯了一个巨大的错误：我从react bootstrap而不是从我自己的组件导入了CarouselItem

类似的问题：我读了上面的文章，仍然不知道如何解决我的问题。你能更清楚地解释一下如何解决这个错误吗？

interface CarouselItemProps {
  interval: number;
  src: string;
  alt: string;
  title: string;
  p: string;
  btn: string;
}

const CarouselItem:FC<CarouselItemProps> = (props: CarouselItemProps) => {
  return (
    <>
      <Carousel.Item interval={props.interval}>
        <img
          className="d-block w-100 carousel-img"
          src={props.src}
          alt={props.alt}
        />
        <Carousel.Caption>
          <h1 className="carousel-title">{props.title}</h1>
          <p className="carousel-p">{props.p}</p>
          <Button variant="primary" className="btn-contact-us">
            {props.btn}
          </Button>
        </Carousel.Caption>
      </Carousel.Item>
    </>
  );
};

export default CarouselItem;