在 Typescript 中将道具传递给功能性 React 组件答案

【问题标题】：Passing props to functional React component in Typescript在 Typescript 中将道具传递给功能性 React 组件
【发布时间】：2020-07-01 13:56:01
【问题描述】：

我正在转换基于类的 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，每个都是一个字符串数组。）

在父组件中，我正在循环遍历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 组件，但这似乎不是这里的情况。

我可能在这里遗漏了一些非常明显的东西。谁能发现错误？

【问题讨论】：

标签： javascript reactjs typescript enums react-redux

【解决方案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
}

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

【讨论】：