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

Question

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

我想传递两个道具：critterType和critter。

critterType是enum这样声明的：

export enum critterType {
    bug,
    fish,
}

critter是一个ICritter具有以下接口的对象：

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

（我们暂时不需要担心ITimeSpan。）

组件CritterEntry看起来像这样：

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;

（state这里也不要太担心；知道它有一个caught对象和一个donated对象就足够了，它们都有两个属性：一个 forbugs和一个 for fish，每个都是一个字符串数组。）

在父组件中，我循环遍历critters列表，如下所示：

allBugs.map((critter:ICritter) => <CritterEntry typeOfCritter={critterType.bug} critter={critter} key={`all_bug_${critter.id}`} />)

完全难倒我的部分是该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'.

从我读过的所有文档来看，似乎我应该能够像以前CritterEntry在基于类的应用程序中一样将播种的道具传递给组件，但这里似乎并非如此。

我可能在这里遗漏了一些非常明显的东西。任何人都可以发现错误吗？

Answer 1

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

尝试这个，

interface ICritterEntryProps {
   typeOfCritter: critterType;
   critter: ICritter;
}

function CritterEntry(props: React.PropsWithChildren<ICritterEntryProps>) {
   // access to typeOfcritter and critter by destructuring from props

   const { typeOfCritter, critter } = props;


   // rest of the component logic
}

还有一种通用类型React.FC可以在使用箭头函数时帮助您

interface ICritterEntryProps {
   typeOfCritter: critterType;
   critter: ICritter;
}

const CritterEntry: React.FC<ICritterEntryProps> = ({ typeOfCritter, critter}) => {
   // component logic
}

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