时间戳

首页 > 解决方案 > 无法将道具从父组件传递给子组件

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

问题描述

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

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：字符串；标题：字符串；p：字符串；btn：字符串；}' 不可分配给类型 'IntrinsicAttributes & Omit<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "key" | HTMLAttributes<...>> & { ...; }, BsPrefixProps<...> & CarouselItemProps> & BsPrefixProps<...> & CarouselItemProps & { ...; }'。类型 'IntrinsicAttributes & Omit<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "key" 上不存在属性 'src' HTMLAttributes<...>> & { ...; }, BsPrefixProps<...> & CarouselItemProps> & BsPrefixProps<...> & CarouselItemProps & { ...; }'

任何人都知道如何解决这个问题？

标签： javascriptreactjstypescriptreact-redux

解决方案

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

推荐阅读