react 函数组件如何能访问到子组件中的方法
时间: 2024-04-12 08:31:07 浏览: 12
React 函数组件可以通过 props 将子组件的方法传递给父组件,然后在父组件中调用子组件的方法具体步骤如下:
1. 在子组件中定义一个方法,例如 `childMethod`。
2. 在父组件中创建一个函数,例如 `parentMethod`,并将其作为 prop 传递给子组件。
3. 在子组件中通过 props 接收父组件传递过来的方法,并在需要调用子组件方法的地方调用父组件传递过来的方法。
下面是一个示例代码:
```jsx
// 子组件
function ChildComponent(props) {
// 子组件方法
const childMethod = () => {
console.log('子组件方法被调用');
};
return (
<div>
<button onClick={props.parentMethod}>调用父组件方法</button>
</div>
);
}
// 父组件
function ParentComponent() {
// 父组件方法
const parentMethod = () => {
console.log('父组件方法被调用');
};
return (
<div>
<ChildComponent parentMethod={parentMethod} />
</div>
);
}
```
在上面的例子中,当点击子组件中的按钮时,会调用父组件中的 `parentMethod` 方法,并在控制台输出 '父组件方法被调用' 的信息。