Question

我对使用Typescript完全陌生，在呈现组件时遇到问题，但同时也传递了onClick函数。我如何像这样将onClick函数传递给CarItem？我认为它正在尝试将onMenuClick视为ICar的财产，但不是，也不应该。 onMenuClick不应成为ICar界面的一部分。它仅仅是一个功能。我在下面放了一个简单的例子。

interface ICar {
    name: string,
    colour: string,
    manufacturer: string
}

const CarGrid : React.FC<ICarGridProps> = car => {
    return (
        <CarItem {...car} onMenuClick={onClick} />
    )
}

const CarItem : React.FC<ICar> = (car, onMenuClick) => {
    return (
        <div onClick={() => onMenuClick(car.name)}>{car.name}</div>
    );
}

谢谢。

Answer 1

这里有些错误：我已更正了CarGrid的返回值，并键入了CarItem的def和params参数

interface ICar {
    name: string,
    colour: string,
    manufacturer: string
}

const CarGrid : React.FC<ICarGridProps> = car => {
    return (
        <CarItem car={car} onMenuClick={onClick} /> 
    )
}

const CarItem : React.FC<{car: ICar, onMenuClick: Function}> = ({car, onMenuClick}) => {
    return (
        <div onClick={() => onMenuClick(car.name)}>{car.name}</div>
    );
}

或者，如果要将汽车对象散布到CarItem中，则应对其进行重构：

...
<CarItem {...car} onMenuClick={onClick} />
...

const CarItem : React.FC<ICar&{onMenuClick: Function}> = ({name, onMenuClick}) => {
    return (
        <div onClick={() => onMenuClick(name)}>{name}</div>
    );
}

React打字稿-具有界面和其他道具的组件

1 个答案: