4

我有一个需要将处理程序函数向下传递给子组件的功能组件（用 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; }'。类型“IntrinsicAttributes & { children?: ReactNode;”上不存在属性“handleLocationChange” }'.ts(2322)

任何帮助将非常感激。我确定我错过了一些小东西。

4

3 回答 3

5

您需要在 Search 组件上声明 handleLocationChange 作为道具

于 2019-11-17T05:00:32.573 回答
5

您需要在搜索组件中声明道具类型并将类型声明为参数：

//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

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

于 2021-07-12T22:40:38.077 回答
0

以这种方式将您的处理程序编码为函数

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

然后它应该工作

于 2019-11-17T04:39:56.547 回答