與Typescript反應：無法將函數prop傳遞給子組件

Question

當我嘗試將鈎子傳遞給功能組件時，出現此錯誤：

Type '() => void' is not assignable to type 'FunctionComponent<InputProps>'.
  Type 'void' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.

 import * as React from 'react'; interface InputProps { name:string, //This is the hook im trying to pass setHook:(hookValue:string) => void, placeholder:string, value:string, type:string, validationErrorParams:[], textArea:boolean } const Input: React.FunctionComponent<InputProps> = () => { return ; }; export default Input; 

Answer 1

您的功能組件簽名（React.FunctionComponent）與您的功能componenet實現（（）=> {}）不匹配

const BadInput: React.FunctionComponent<InputProps> = () => {
  return;
};
// BadInput signature is () => void 

const Input: React.FunctionComponent<InputProps> = (props: InputProps) => {
  return <span></span>;
};
// Input matchs the signature (InputProps) => React.Element

如果查看FunctionComponent接口，您將注意到它必須實現類似（props：P＆{children ?: ReactNode}，context ?: any）的功能：ReactElement | 空值;

interface FunctionComponent<P = {}> {
    (props: P & { children?: ReactNode }, context?: any): ReactElement<any> | null;
    propTypes?: WeakValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
}