Javascript 将道具传递给Typescript中的功能性React组件

我正在将一个基于类的React应用程序转换为对功能组件使用React挂钩，但当我尝试将道具传递给子组件时，遇到了一个奇怪的错误

我想通过两个道具：critertype和critter

CriterType是一个枚举，声明如下：

export enum critterType {
    bug,
    fish,
}

function CritterEntry(typeOfCritter: critterType, critter: ICritter) {
    const critterId = critter.id.toString();    

    const state = store.getState();

    let caughtSource: string[] = [];
    let donatedSource: string[] = [];

    switch(typeOfCritter) {
        case critterType.bug: {
            caughtSource = state.caughtCritters.bugs;
            donatedSource = state.donatedCritters.bugs;
            break;
        }
        case critterType.fish: {
            caughtSource = state.caughtCritters.fish;
            donatedSource = state.donatedCritters.fish;
        }
    }

    const caught = caughtSource.indexOf(critterId) > -1;
    const donated = donatedSource.indexOf(critterId) > -1;

    return (
        <li className={'critterEntry'}>
            <ul>
                <li>{critter.name}</li>
                <li>{critter.price} bells</li>
            </ul>
            <ul>
                <li onClick={() => store.dispatch(catchCritter({id: critterId, critterType: typeOfCritter}))}>{caught ? 'Caught' : 'Not caught'}</li>
                <li onClick={() => store.dispatch(donateCritter({id: critterId, critterType: typeOfCritter}))}>{donated ? 'Donated' : 'Not donated'}</li>
            </ul>
        </li>
    );
}

export default CritterEntry;

Criter是具有以下接口的ICritter对象：

export interface ICritter {
    id: number;
    name: string;
    thumbnail: string;
    location: string;
    price: number;
    times: ITimeSpan[];
    northMonths: number[];
    southMonths: number[];
    silhouetteSize?: number;
}

我们现在不需要担心它

CriteEntry概要如下所示：

export enum critterType {
    bug,
    fish,
}

function CritterEntry(typeOfCritter: critterType, critter: ICritter) {
    const critterId = critter.id.toString();    

    const state = store.getState();

    let caughtSource: string[] = [];
    let donatedSource: string[] = [];

    switch(typeOfCritter) {
        case critterType.bug: {
            caughtSource = state.caughtCritters.bugs;
            donatedSource = state.donatedCritters.bugs;
            break;
        }
        case critterType.fish: {
            caughtSource = state.caughtCritters.fish;
            donatedSource = state.donatedCritters.fish;
        }
    }

    const caught = caughtSource.indexOf(critterId) > -1;
    const donated = donatedSource.indexOf(critterId) > -1;

    return (
        <li className={'critterEntry'}>
            <ul>
                <li>{critter.name}</li>
                <li>{critter.price} bells</li>
            </ul>
            <ul>
                <li onClick={() => store.dispatch(catchCritter({id: critterId, critterType: typeOfCritter}))}>{caught ? 'Caught' : 'Not caught'}</li>
                <li onClick={() => store.dispatch(donateCritter({id: critterId, critterType: typeOfCritter}))}>{donated ? 'Donated' : 'Not donated'}</li>
            </ul>
        </li>
    );
}

export default CritterEntry;

让我完全困惑的是allBugs.map函数抛出了一个错误：

Type '{ typeOfCritter: critterType; critter: ICritter; key: string; }' is not assignable to type '(IntrinsicAttributes & critterType.bug) | (IntrinsicAttributes & critterType.fish)'.
      Type '{ typeOfCritter: critterType; critter: ICritter; key: string; }' is not assignable to type 'critterType.fish'.

从我阅读的所有文档来看，似乎我应该能够像在基于类的应用程序中一样，将播撒的道具传递给CriteEntry组件，但这里的情况似乎不是这样

---

我可能错过了一些显而易见的东西。有人能发现错误吗？

组件CriteEntry的第一个参数应该是一个对象，它将成为该组件的支柱。您应该将道具注释为一个对象，而不是将它们作为单独的参数传递

试试这个

接口ICriterEntryProps{ CRITTER类型：critterType； 生物：ICritter； } 功能标准EntryProps:React.PropsWithChildren{ //通过从道具中解构，可以访问Criter和Criter的类型 常数{typeOfCritter，critter}=props； //组件逻辑的其余部分 } 此外，还有一个通用类型React.FC，可在使用箭头函数时提供帮助

接口ICriterEntryProps{ CRITTER类型：critterType； 生物：ICritter； } const criterentry:React.FC={typeOfCritter，critter}=>{ //组件逻辑 }

---

功能组件的第二个参数可以是ref object，可以在使用forwardRef时使用，但这在这里并不重要。

组件criteEntry的第一个参数应该是一个对象，它将成为该组件的支柱。您应该将道具注释为一个对象，而不是将它们作为单独的参数传递

试试这个

接口ICriterEntryProps{ CRITTER类型：critterType； 生物：ICritter； } 功能标准EntryProps:React.PropsWithChildren{ //通过从道具中解构，可以访问Criter和Criter的类型 常数{typeOfCritter，critter}=props； //组件逻辑的其余部分 } 此外，还有一个通用类型React.FC，可在使用箭头函数时提供帮助

接口ICriterEntryProps{ CRITTER类型：critterType； 生物：ICritter； } const criterentry:React.FC={typeOfCritter，critter}=>{ //组件逻辑 } 功能组件的第二个参数可以是ref对象，可以在使用forwardRef时使用，但这在这里并不重要