ReactJS/Typescript：无法访问作为具有编号索引的 prop 传递的字符串数组

Question

我对 Typescript 比较陌生并且已经爱上了它，但是我现在面临一个奇怪的问题：

我在父组件中创建了一个字符串数组，将其作为 prop 传递给子组件，并尝试从那里访问带有编号索引的数组。

这是我得到的编译错误：

TypeScript error in /home/simon/development/portfolio/src/components/Projects/ImageSlider/ImageSlider.tsx(27,23): Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'PropsWithChildren'. Property '0' does not exist on type 'PropsWithChildren'. TS7053

ImageSlider.tsx（小孩）

import React, { useEffect, useState } from "react";
import styles from "./ImageSlider.module.scss";
import { motion } from "framer-motion";
import Modal from "react-modal";

interface ImageSliderProps {
    images: string[];
}

const ImageSlider: React.FC<ImageSliderProps> = (images) => {
 
    const [index, setIndex] = useState<number>(0);

    const slideRight = () => { };
    const slideLeft = () => { };

    return (
        <div className={styles.slider_wrapper}>
            <button></button>
            <img src={images[0]} alt="" />
            <button></button>
        </div>
    );
};

export default ImageSlider;

父组件：

...

  let sliderImages: string[] = [
    "../../assets/Dotrice/dotrice-background.png",
    "../../assets/Dotrice/dotrice1.png",
    "../../assets/Dotrice/dotrice2.png",
    "../../assets/Dotrice/dotrice3.png",
    "../../assets/Dotrice/dotrice4.png",
  ];

return (
    <ImageSlider images={sliderImages} />
);

...

我是否必须在某处显式设置数组索引的类型？

谢谢，祝你有美好的一天，注意安全:)

Answer 1

images 是 props 对象中的一个字段。您可以使用解构：

const ImageSlider: React.FC<ImageSliderProps> = ({ images }) => {

或先参考props：

const ImageSlider: React.FC<ImageSliderProps> = (props) => {

<img src={props.images[0]} alt="" />

ReactJS/Typescript：无法访问作为具有编号索引的 prop 传递的字符串数组

ReactJS/Typescript: Cannot access string array passed as prop with numbered index

arrays

typescript

reactjs

react-props

react-functional-component