时间戳

首页 > 解决方案 > 如何解决“IntrinsicAttributes & Function”类型上不存在“类型属性”？

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

问题描述

我有一个像这样的父组件

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”上不存在属性“重新加载”

我该如何解决这个问题？

标签： javascriptreactjstypescript

解决方案

我认为它抱怨您访问 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为小写组件命名空间是为 HTML 原语保留FilterComponent的

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

推荐阅读