父组件如何调用函数式子组件并传递参数至子组件
在 React 中,父组件可以通过将函数作为属性传递给子组件的方式来调用函数式子组件。这样,父组件可以将参数传递给子组件,并在子组件中使用这些参数。以下是一个简单的示例,说明如何实现这一点:
步骤1: 创建子组件
首先,定义一个函数式子组件,接收父组件传递的 props:
// 子组件
const ChildComponent = ({ onButtonClick }) => {
return (
<button onClick={() => onButtonClick("Hello from Child Component!")}>
Click Me
</button>
);
};
export default ChildComponent;
在这个例子中,子组件 ChildComponent
接收一个叫做 onButtonClick
的函数作为 props,并在按钮点击时调用该函数。
步骤2: 创建父组件
接下来,定义父组件,并传递一个处理函数给子组件:
import React from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const handleChildButtonClick = (message) => {
alert(message);
};
return (
<div>
<h1>Parent Component</h1>
{/* 传递 handleChildButtonClick 函数作为 prop */}
<ChildComponent onButtonClick={handleChildButtonClick} />
</div>
);
};
export default ParentComponent;
在父组件 ParentComponent
中,我们定义了一个叫做 handleChildButtonClick
的函数,并将其作为 onButtonClick
属性传递给子组件 ChildComponent
。
代码运行结果
当你在 ChildComponent
中点击按钮时,handleChildButtonClick
函数会被调用,并弹出一个包含消息的提示框(即子组件传递的参数)。
通过这种方式,父组件可以调用子组件中的函数,并动态地将参数传递给它。这样可以实现组件之间的互动和数据传递。