如何解决“IntrinsicAttributes & Function”类型上不存在的类型属性“”？

Question

我有一个像这样的父组件

import filterComponent from 'filter/filterComponent'


  const reloadHandler = useCallback(
    (event: MouseEvent) => {
      event.preventDefault();
     // my logic
    },
    [Reload, Fetching]
  );

const parent = () => { 
return (
    <filterComponent reload={reloadHandler} /> 
   )
}

过滤器组件：

export const filterComponent = (filter: Function, reload: Function) => { 
    return (
       <Button onClick={reload} />
   )
}

错误：

输入'{重新加载：（e：MouseEvent）=> void; }' 不可分配给类型 'IntrinsicAttributes & Function'。 “IntrinsicAttributes & Function”类型上不存在属性“reload”

我该如何解决这个问题？

Answer 1

我认为它抱怨您访问 FilterComponent 中的属性的方式。 试试这个版本：

type FilterComponentProps = {
  reload: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void,
};

export const FilterComponent = (props: FilterComponentProps) => { 
 return <button onClick={props.reload} />;
}

然后是调用它的组件：

function SomeComponent() {
  const reloadHandler = React.useCallback(
    (event: React.MouseEvent) => {
      event.preventDefault();
      // my logic
    },
    // I've removed dependencies as I'm not sure where you take them from
    [] 
  );
  return (
    <FilterComponent reload={reloadHandler} /> 
  )
}

另请注意，我已将filterComponent更改为FilterComponent ，因为小写组件名称空间是为 HTML 基元保留的

我还为您编写了一个 CodeSandbox（以防万一）： https ://codesandbox.io/s/react-typescript-3i7cm