react函数组件调用子组件的方法有哪些,并附代码
时间: 2023-06-22 14:37:23 浏览: 57
React函数组件调用子组件的方法有以下几种方式:
1. 使用props传递方法: 在父组件中定义方法,将其作为属性传递给子组件,子组件通过props调用该方法。示例代码如下:
```jsx
import React from 'react';
function ParentComponent() {
const handleChildClick = () => {
console.log('Child clicked');
};
return (
<div>
<ChildComponent handleClick={handleChildClick} />
</div>
);
}
function ChildComponent(props) {
return (
<button onClick={props.handleClick}>
Click me
</button>
);
}
```
2. 使用useRef: 在父组件中使用useRef Hook创建ref对象,将其作为属性传递给子组件,子组件通过ref调用该方法。示例代码如下:
```jsx
import React, { useRef } from 'react';
function ParentComponent() {
const childRef = useRef(null);
const handleChildClick = () => {
console.log('Child clicked');
};
return (
<div>
<ChildComponent ref={childRef} />
<button onClick={() => childRef.current.handleClick()}>
Click me
</button>
</div>
);
}
function ChildComponent() {
const handleClick = () => {
console.log('Child clicked');
};
return (
<button onClick={handleClick}>
Click me
</button>
);
}
```
3. 使用React.forwardRef: 在子组件中使用React.forwardRef方法创建ref对象,将其作为属性传递给父组件,父组件通过ref调用该方法。示例代码如下:
```jsx
import React, { forwardRef } from 'react';
const ChildComponent = forwardRef((props, ref) => {
const handleClick = () => {
console.log('Child clicked');
};
return (
<button ref={ref} onClick={handleClick}>
Click me
</button>
);
});
function ParentComponent() {
const childRef = useRef(null);
return (
<div>
<ChildComponent ref={childRef} />
<button onClick={() => childRef.current.click()}>
Click me
</button>
</div>
);
}
```
以上是React函数组件调用子组件的几种方法。其中props传递方法是最常用的方式。