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

Posted 2023-03-13

【中文标题】无法将道具从父组件传递给子组件

【英文标题】：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" 
      
      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 & ...; '

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

【问题讨论】：

与此类似的问题：***.com/questions/65251921/…

我阅读了上面的帖子，但仍然不知道如何解决我的问题。你能更清楚地解释一下如何解决这个错误吗？

【参考方案1】：

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

【参考方案2】：

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

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

注意：此答案未经测试。