类型“[Images]”不可分配给类型 'string'.ts(2322)

Question

我正在尝试通过 props 传递对象数组，但出现了错误：

(property) images: [Images]

Type '[Images]' is not assignable to type'string'.ts(2322)

ProductBlock.tsx(4, 5): The expected type comes from this index signature.

这是我的街区：

interface Images {
    [key: string]: string;
}

interface Colors {
    [key: string]: string;
}

interface Product {
    _id: string;
    name: string;
    description: string;
    price: number;
    colors: [string];
    images: [Images];
    type: string;
    likes: number;
}

const ProductBlock = (product: Product) => {
    console.log(product.images); // [{...}]

    const RenderColors = () => {

    }
    
    const RenderImages: React.FC<Images> = (images: Images) => {
        console.log(images);
        return(
            <>
                
            </>
        )
    }

    return (
        <div className="product product-container" key={product._id}>
            <RenderImages images={product.images}/> //<--- Error here at "images="
            <h3 className="product-title">{product.name}</h3>
        </div>
    )
}

export default ProductBlock;

Answer 1

product.images 是一组 Images 对象，但您将其传递给 RengerImages，后者将单个 Images 对象作为参数。

试试这个：

const ProductBlock = (product: Product) => {
    console.log(product.images); // [{...}]

    const RenderColors = () => {

    }
    
  const RenderImages: React.FC<{ images: [Images] }> = ({ images }) => {
        console.log(images);
        return(
            <>
                
            </>
        )
    }

    return (
        <div className="product product-container" key={product._id}>
            <RenderImages images={product.images}/> 
            <h3 className="product-title">{product.name}</h3>
        </div>
    )
}

类型“[Images]”不可分配给类型 'string'.ts(2322)

Type '[Images]' is not assignable to type 'string'.ts(2322)

typescript

reactjs

tsx