TypeScript 在反应中将道具传递给子组件时出错

Question

我正在使用 react + typescript 构建费用跟踪器应用程序

费用类型.ts

    export  type IState = {
    id : number,
    text : string,
    amount : number

}

export type IinitialStateType =  {
    transactions : IState[]
}

export type IActions =  {
    type : string,
    payload : any
}

export type contextProps = {
    transactions : IState[];
    addTransaction: (trans: IState) => void;
    deleteTransaction: (id: number) => void;
}

然后我使用了 API 上下文和减速器，并在全局 State 文件中初始化了我的初始状态

全球状态.tsx

import React , {createContext,useReducer} from 'react'
import {IinitialStateType,contextProps} from '../Types/expense_type'
import AppReducer from './AppReducer'

const initailState : IinitialStateType = {
    transactions : [
          { id: 1, text: 'Flower', amount: -20 },
          { id: 2, text: 'Salary', amount: 300 },
          { id: 3, text: 'Book', amount: -10 },
          { id: 4, text: 'Camera', amount: 150 }
    ]
}

export const GlobalContext = createContext<Partial<contextProps>>({})

export const GlobalProvider : React.FC = ({children}) : JSX.Element => {

    const [state,dispatch] = useReducer(AppReducer,initailState)
    
    return(
        <GlobalContext.Provider value={{
            transactions : state.transactions
        }}>
            {children}
        </GlobalContext.Provider>
    )
}

然后我在 TransactionList.tsx 组件和 map 中使用了所有初始 state 值并将这些值传递给子组件 Transaction.tsx ，这些值正在接收

事务列表.tsx

import React ,{useContext}from 'react'
import {GlobalContext} from './../Context/GlobalState'
import {contextProps,IinitialStateType,IState} from '../Types/expense_type'
import {Transaction} from './Transaction'

export const TransactionList : React.FC = () : JSX.Element => {

    const {transactions} : any = useContext(GlobalContext)
    return (
        <>   
            <h3>History</h3>
            <ul className="list">
                { 
                    transactions.map( (transaction : IState , index : number)  => 
                        (<Transaction key={index} transaction={transaction} />
                    )) 
                 }
            </ul>
        
        </>
    )
}

交易.tsx

    import React from 'react'
    import {IinitialStateType} from '../Types/expense_type'
    export const Transaction : React.FC<IinitialStateType>= (props : any) : JSX.Element => {

    let sign : string = props.transaction.amount > 0 ? '+' : '-'

    return (
        <>
            <li className={props.transaction.ammount < 0 ? "minus" : "plus"}>
                {props.transaction.text}{" "}
                <span>
                    {sign}${Math.abs(props.transaction.ammount)}
                </span>
                <button
                    className="btn-delete"
                >
                    x
                </button>
            </li>
        </>
    )
}

但是在编译时它会在 TransactionList.tsx 文件中出现错误

TypeScript error in C:/Users/Abdul Rehman Aziz/Desktop/New folder/expense-tracker-ts/src/Components/TransactionList.tsx(14,88): Type '{ key: number; transaction: IState; }' is not assignable to type 'IntrinsicAttributes & IState & { children?: ReactNode; }'.   Property 'transaction' does not exist on type 'IntrinsicAttributes & IState & { children?: ReactNode; }'.  TS2322

    12 |             <h3>History</h3>
    13 |             <ul className="list">
  > 14 |                  { transactions.map( transaction => (<Transaction key={transaction.id} transaction={transaction} />)) }
       |                                                                                        ^
    15 |             </ul>
    16 |         </>
    17 |         </>

Answer 1

你必须为 React.FC 指定 Props 的类型，而不是 state。 像这样：

export const Transaction: React.FC<{ transaction: IState }> = (
  props: any

我还制作了一个工作示例： https://codesandbox.io/s/focused-sanderson-e6zlm?file=/src/App.tsx

Answer 2

您的 Transaction 组件需要 IinitialStateType 类型的道具，并且根据您对该类型的定义，它没有称为 transaction 的属性，并且它不接收一个项目而是一个数组。 如果您将 Transaction 组件中的道具类型更改为类似

export const Transaction : React.FC<IState>= (props : any) : JSX.Element => {
...
}

它应该有帮助。