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

Question

I'm converting a class-based React app to use React hooks with functional components, but I'm coming across an odd error when I try and pass props down to a child component.

There are two props I want to pass: critterType and critter .

critterType is an enum which is declared like this:

export enum critterType {
    bug,
    fish,
}

critter is an ICritter object with the following interface:

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

(We don't need to worry about ITimeSpan for now.)

The CritterEntry compenent looks like this:

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;

(Don't worry too much about state here, either; it's enough to know that it has a caught object and a donated object, both of which have two properties: one for bugs and one for fish , each of which is an array of strings.)

In the parent component, I'm looping through a list of critter s like so:

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

The part that's totally stumping me is that the allBugs.map function is throwing an error:

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'.

From all the documentation I've read, it seems like I should be able to pass the props sown to the CritterEntry component just as I used to in the class-based app, but that doesn't seem to be the case here.

I'm probably missing something totally obvious here. Can anyone spot the error?

Answer 1

The first argument to the component CritterEntry should be an object which will be the props to that component. You should annotate the props as one object instead of passing them as separate arguments.

Try this,

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
}

Also there is a generic type React.FC that can help you when using arrow functions

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

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

The second argument to a functional component can be ref object and can be used when using forwardRef but that is not important here.