react 程序父组件如何传递一个异步函数,子组件中用typescript怎么写类型
时间: 2024-06-09 12:08:29 浏览: 9
在React中,父组件可以通过Props将异步函数传递给子组件。具体做法如下:
1. 在父组件中定义异步函数,并将其作为Props传递给子组件:
```typescript
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent: React.FC = () => {
const [data, setData] = useState([]);
const fetchData = async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const jsonData = await response.json();
setData(jsonData);
}
return (
<div>
<ChildComponent fetchData={fetchData} />
</div>
);
}
export default ParentComponent;
```
2. 在子组件中声明Props,并定义Props中的fetchData函数类型:
```typescript
import React from 'react';
interface ChildProps {
fetchData: () => Promise<void>;
}
const ChildComponent: React.FC<ChildProps> = ({ fetchData }) => {
return (
<div>
<button onClick={fetchData}>Fetch Data</button>
</div>
);
}
export default ChildComponent;
```
在这个例子中,我们在父组件中定义了一个名为fetchData的异步函数,并将其作为fetchData Props传递给了子组件。在子组件中,我们声明了ChildProps接口,定义了fetchData函数类型为() => Promise<void>,并将其作为ChildComponent的Props类型。在子组件中,我们可以通过Props访问到父组件传递的fetchData函数,并将其绑定到button的onClick事件上。
这样,当用户点击button时,就会调用父组件中的fetchData函数,并更新父组件的state。