使用钩子将打字稿传递函数作为道具进行反应

Question

我对打字稿很陌生。 尝试使用 React、TypeScript 和 Hooks 构建一个简单的 crud 应用程序。我不知道如何将数据并作为道具一起传递给子组件，该子组件将进一步将道具发送到他的 chid。下面是一个示例代码。

父组件

const App = () => {
const [data, setData] = useState([
{ id: 1, name: 'John', email: '[e-mail]' },
{ id: 1, name: 'Mike', email: '[e-mail]' },
])
// how to send this function to StudentList component
const removeStudent = (id: number): void => {
setData(data.filter(item => item.id !== id))
}
return (
<div>
<StudentList data={data} removeStudent={removeStudent} />
</div>
);
}

子组件/学生列表

interface StudentsInterface {
id: number,
name: string,
email: string,
}
interface PropsFunction {
removeStudent: () => void
}
const StudentList = ({ data }: { data: StudentsInterface[] }, { removeStudent }: PropsFunction) => {
console.log('removeStudent ==>', removeStudent) // getting undefined
return (
<table id='students'>
<tbody>
{data.map((student, index) => {
return (
<Student student={student} key={index} removeStudent={removeStudent} />
)
})}
</tbody>
</table>
)
}

如果我只是传递数据(StudentList 的第一个参数(，我会得到道具，但我也想要删除学生函数......

如果只是反应，我知道我会在 studentList 中解构 {removeStudent}，我已经完成了，但在打字稿中，我必须定义数据类型......

希望我清楚。 由于我对打字稿很陌生，如果您解释我做错了什么，我会很高兴。

Answer 1

您使用 2 个参数作为道具：

const StudentList = ({ data, removeStudent }: { data: StudentsInterface[], removeStudent: PropsFunction }) => ...

编辑：

修复它的一种方法是将PropsFunction定义为接口，这意味着它是一个具有属性removeStudent的对象 - 您可能只希望它是：

type PropsFunction = () => void;