Question

我正在使用打字稿将道具从父母传递给孩子：这是子组件

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

<块引用>

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

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

Answer 1

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

Answer 2

查看错误 sudo ruby something.rb 中的短语。我怀疑属性 Property 'src' does not exist on type 'IntrinsicAttributes.... 是像 src 这样的 HTML 元素所特有的，因此将此名称从 img 更改为其他名称可能会正常工作。

尝试在您的界面和传递父组件时将 src 更改为 src。

注意：此答案未经测试。

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

2 个答案: