在React TypeScript中,可以通过props将函数传递给子组件。以下是一个实现的步骤:
handleClick
的函数:import React from "react";
import ChildComponent from "./ChildComponent";
function ParentComponent() {
const handleClick = () => {
console.log("Button clicked");
};
return (
<div>
<ChildComponent handleClick={handleClick} />
</div>
);
}
export default ParentComponent;
ChildComponent
组件中接收handleClick
函数,并将其与按钮的onClick
事件关联起来:import React from "react";
type ChildComponentProps = {
handleClick: () => void;
};
function ChildComponent(props: ChildComponentProps) {
return (
<div>
<button onClick={props.handleClick}>Click Me</button>
</div>
);
}
export default ChildComponent;
通过上述步骤,当点击子组件中的按钮时,handleClick
函数将被触发,并在控制台上打印出"Button clicked"。
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云