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

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

Answer 2

通过这种方式将处理程序编码为函数

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

然后应该说

Answer 3

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

//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 并希望通过组件简化自己的生活的人（我不建议通过多个级别传递函数）。

将功能作为道具传递给Typescript React功能组件

3 个答案: