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

【问题标题】：Unable to pass props from parent components to child无法将道具从父组件传递给子组件
【发布时间】：2021-07-04 01:06:37
【问题描述】：

我正在使用 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;

和父组件：

  <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" 处收到错误：

键入'{区间：数字； src：字符串； alt：字符串；标题：字符串；磷：细绳; btn：字符串； }' 不可分配给类型 'IntrinsicAttributes & 省略, "键" | HTMLAttributes<...>> & { ...; }, BsPrefixProps<...> & CarouselItemProps> & BsPrefixProps<...> & CarouselItemProps & { ...; }'。类型上不存在属性“src” '内在属性 & 省略, "键" | HTMLAttributes<...>> & { ...; }, BsPrefixProps<...> & CarouselItemProps> & BsPrefixProps<...> & CarouselItemProps & { ...; }'

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

【问题讨论】：

与此类似的问题：stackoverflow.com/questions/65251921/…
我阅读了上面的帖子，但仍然不知道如何解决我的问题。你能更清楚地解释一下如何解决这个错误吗？

标签： javascript reactjs typescript react-redux

【解决方案1】：

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

【讨论】：

【解决方案2】：

查看错误Property 'src' does not exist on type 'IntrinsicAttributes.... 的短语。我怀疑属性src 是特定于HTML 元素的，例如img，因此将此名称从src 更改为其他名称可能会正常工作。

尝试在您的界面中将src 更改为srcImage，同时传递父组件。

注意：此答案未经测试。

【讨论】：