Javascript React-typscript-具有接口和附加道具的组件

我对使用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>
    );
}

接口ICar{
名称：string，
颜色：细绳，
制造商：字符串
}
const CarGrid:React.FC=car=>{
返回(
)
}
const CarItem:React.FC=（汽车，onMenuClick）=>{
返回(
onMenuClick（car.name）}>{car.name}
);
}

---

谢谢大家。

这里有一些地方不对劲： 我已更正了

CarGrid

的返回以及

CarItem

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>
    );
}

接口ICar{
名称：string，
颜色：细绳，
制造商：字符串
}
const CarGrid:React.FC=car=>{
返回(
)
}
const CarItem:React.FC=（{car，onMenuClick}）=>{
返回(
onMenuClick（car.name）}>{car.name}
);
}

或者，如果您想将car对象扩展到CarItem中，则应该对其进行重构：

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

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

。。。
...
const CarItem:React.FC=（{name，onMenuClick}）=>{
返回(
onMenuClick（name）}>{name}
);
}

CarItem参数应接收一个对象，而不是两个参数。我想您的意思是这样使用它：``const CarItem:React.FC=（{car，onMenuClick}）=>{return（onMenuClick（car.name）}>{car.name}；}```先生，你是我的英雄！非常感谢你。这真是给我添麻烦了！我正在尝试使用TS重构我们的一些代码，我对它完全陌生。现在这一切都很有道理。谢谢：）