[英]React Typescript: Passing onClick as a Prop
I am trying to create a simple Hamburger Menu component using React & Typescript.我正在尝试使用 React & Typescript 创建一个简单的汉堡菜单组件。 What I want to do is to pass the
onClick
event handler to this menu componunent as a prop.我想要做的是将
onClick
事件处理程序作为道具传递给这个菜单组件。 This is the code that I currently have:这是我目前拥有的代码:
function Hamburger({ onClick }) {
return (
<Box
as="button"
type="button"
p="1"
fontSize="2xl"
color="gray.600"
onClick={onClick}
display={{ base: "block", lg: "none" }}
>
<HiOutlineMenu />
</Box>
)
}
However, typescript complains about the {onClick}
prop that is being passed:但是,打字稿抱怨正在传递的
{onClick}
道具:
Binding element 'onClick' implicitly has an 'any' type
I thought that I could fix this by hovering over the onClick
key in the Box
component and seeing what type onClick
takes.我认为我可以通过将鼠标悬停在
Box
组件中的onClick
键上并查看onClick
采用什么类型来解决此问题。 Hovering over that key produces the following message:将鼠标悬停在该键上会产生以下消息:
As such, I thought to modify the {onClick}
prop as follows:因此,我想修改
{onClick}
属性如下:
function Hamburger({ onClick }: React.MouseEventHandler | undefined) {
But that just produces a new error on {onClick}
:但这只会在
{onClick}
上产生一个新错误:
Property 'onClick' does not exist on type 'MouseEventHandler<Element> | undefined'.ts(2339)
var onClick: any
I am now at a loss of what to do.我现在不知道该怎么办。 As such, I am wondering -- how should I type
{onClick}
?因此,我想知道 - 我应该如何输入
{onClick}
?
Thanks.谢谢。
Correct typing for your Hamburger
functional component is: Hamburger
功能组件的正确类型是:
function Hamburger({ onClick }: { onClick? : React.MouseEventHandler }): JSX.Element {
// actual code
}
As number of props grow, inline type declarations may get messy.随着道具数量的增加,内联类型声明可能会变得混乱。 So, it's a good habit to move them into designated type:
因此,将它们移动到指定类型是一个好习惯:
type Props = {
onClick?: React.MouseEventHandler
}
function Hamburger({ onClick }: Props) JSX.Element {
// actual code
}
It also has benefits if later you'll have to accept children
prop in this component.如果以后您必须在此组件中接受
children
道具,它也有好处。 Then you may use React.FC
helper with Props
type:然后你可以使用带有
Props
类型的React.FC
助手:
const Hamburger: React.FC<Props> = ({ onClick, children }) => { // no need to type `children` prop yourself
// actual code
}
It is better to use types provided by react.最好使用 react 提供的类型。 Consider this:
考虑一下:
import React, { FunctionComponent, MouseEventHandler } from 'react';
interface Props {
onClick?: MouseEventHandler;
}
const Button: FunctionComponent<Props> = ({ onClick }) => (
<Box
as="button"
type="button"
p="1"
fontSize="2xl"
color="gray.600"
onClick={onClick}
display={{ base: "block", lg: "none" }}
>
<HiOutlineMenu />
</Box>
);
type THamburgerProps = {
onClick: () => void;
}
function Hamburger({ onClick }: THamburgerProps) {
return (
<Box
as="button"
type="button"
p="1"
fontSize="2xl"
color="gray.600"
onClick={onClick}
display={{ base: "block", lg: "none" }}
>
<HiOutlineMenu />
</Box>
)
}
function App(){
return <Hamburger onClick={() => console.log("hanburger clicked!")}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.