将函数作为 prop 传递给 Typescript React 功能组件

Question

我有一个功能组件（用 Typescript 编写）需要将处理函数向下传递给子组件。这是父函数的缩小版本：

type Props = { handleLocationChange(): void };

const Sidebar: React.FC<Props> = (props) => { 
 const handleLocationChange = () => {
    console.log('Location Changed.');
  };
return (
   <>
      <Search handleLocationChange={handleLocationChange} /> 
   </>
)
}

在 VS Code 中，搜索组件显示错误：

类型'{ handleLocationChange: () => void; }' 不可分配给类型 'IntrinsicAttributes & { children?: ReactNode; }'。属性 'handleLocationChange' 在类型 'IntrinsicAttributes & { children?: ReactNode; }'.ts(2322)

上不存在

如有任何帮助，我们将不胜感激。我确定我遗漏了一些小东西。

Answer 1

用这种方式像函数一样编写您的处理程序

function handleLocationChange(){
    console.log('Location Changed.');
  };

那么应该可以了

Answer 2

您需要在 Search 组件上将 handleLocationChange 声明为 prop

Answer 3

需要在Search Component 中声明prop type 和parameter type:

//use this type to both components (children and parent)
interface FuncProps {
    //here you can declare the return type (here is void)
    handleLocationChange: (values: any) => void;
}
//children start
// here are the tip, define the type in the React.FC and in the FC's parameters itself
const Search: React.FC<FuncProps> = (props: FuncProps) => {
    ... your component behavior and view ...
    return (
        {/*↓↓↓↓ use the prop like this ↓↓↓↓*/}
        <input onClick={props.handleLocationChange('something if you need')}/>
    )
};
//children end

// parent start
const Sidebar: React.FC<Props> = (props: FuncProps) => { 
return (
   <>
      <Search handleLocationChange={props.handleLocationChange} /> 
   </>
)
}
//parent end

我希望这个答案可以帮助那些想使用 typescript 并希望通过组件轻松传递函数的人（我不建议通过多个级别传递函数）。

将函数作为 prop 传递给 Typescript React 功能组件

Passing a function as a prop to a Typescript React Functional Component

javascript

typescript

reactjs

react-props

react-functional-component