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对象，这两个对象都有两个属性就足够了：一个用于bugs，另一个用于fish，每个都是字符串数组。）

在父组件中，我像这样遍历critter的列表：

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的第一个参数应该是一个对象，它将成为该组件的道具。您应该将道具作为一个对象进行注释，而不是将它们作为单独的参数传递。

尝试一下，

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
}

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

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

1 个答案: