react ts 父组件调用子组件的方法

react ts 父组件调用子组件的方法
## 1.介绍React和TypeScript
React是一款由Facebook开发的用于构建用户界面的JavaScript库。

它让开发者可以通过组件化的方式来构建应用，提高了代码的可维护性和复用性。

而TypeScript是JavaScript的超集，它在JavaScript的基础上增加了可选的静态类型检查，可以提高代码的健壮性和可读性。

## 2.父组件调用子组件方法的原理
在React中，父组件调用子组件方法的主要方式是通过`ref`和
`forwardRef`。

首先，在子组件中创建一个方法，然后在该方法中返回需要传递给父组件的值。

在父组件中，通过`ref`或`forwardRef`获取子组件的引用，然后调用子组件的方法。

## 3.示例代码：父组件调用子组件方法
以下是一个简单的示例，展示了如何使用React和TypeScript实现父组件调用子组件方法：
```tsx
// 子组件
import React from "react";
interface ChildComponentProps {
count: number;
}
const ChildComponent: React.FC<ChildComponentProps> =
({ count }) => {
const increase = () => {
count++;
console.log("子组件计数：", count);
};
return (
<div>
<p>子组件计数：{count}</p>
<button onClick={increase}>增加计数</button>
</div>
);
};
export default ChildComponent;
// 父组件
import React from "react";
import ChildComponent from "./ChildComponent";
interface ParentComponentProps {
count: number;
}
const ParentComponent: React.FC<ParentComponentProps> = ({ count }) => {
const handleIncrease = () => {
count++;
console.log("父组件调用子组件增加计数：", count);
};
return (
<div>
<p>父组件计数：{count}</p>
<ChildComponent ref={(ref) => (console.log("获取子组件引用：", ref))} />
<button onClick={handleIncrease}>增加计数</button>
</div>
);
};
export default ParentComponent;
```
在这个示例中，我们创建了一个名为`ChildComponent`的子组件，它有一个`increase`方法用于增加计数。

然后在父组件`ParentComponent`中，我们通过`ref`获取子组件的引用，并调用`increase`方法。

## 4.注意事项：调用方法时的参数传递和返回值
在调用子组件方法时，需要注意以下两点：
1.参数传递：父组件调用子组件方法时，可以通过绑定事件处理函数的方式将所需参数传递给子组件。

例如，在上面的示例中，我们将`count`作为参数传递给子组件的`increase`方法。

2.返回值：子组件方法可以返回一个值，但需要注意的是，返回值会被自动包装为`ponent`类型。

因此，在父组件中使用返回值时，需要进行类型解构。