说明
通常情况下,React 子组件使用父组件的方法或值通过props传递,反过来,父组件如果需要子组件的方法就需要子组件将自己的方法暴露出去。以下是一个实例:
User.tsx
import React, { FC, useEffect, useState, useRef } from 'react'; import { Button, Table } from 'antd'; import UserEdit, { UserEditRef } from './UserEdit'; import { EditFilled } from '@ant-design/icons'; interface User { desc?: string; name?: string; } const User: FC = () => { const userEditRef = useRef<UserEditRef>(null); const columns: any = [ { title: '名称', dataIndex: 'name', key: 'name', }, { title: '描述', dataIndex: 'desc', key: 'desc', }, { title: '操作', render: (_: string, record: User) => { return ( <EditFilled onClick={(e) => { userEditRef.current?.open(record); }} /> ); }, }, ]; const [datasource, setDatasource] = useState<User[]>([ { desc: 'I am Tom', name: 'Tom', }, { desc: 'I am Marry', name: 'Marry', }, ]); const updateData = (data?: User) => { const datas = [data, ...datasource]; setDatasource(datas); }; return ( <div> <Button onClick={() => { userEditRef.current.open(); }} > 新建 </Button> <Table columns={columns} dataSource={datasource} /> <UserEdit ref={userEditRef} onSave={updateData} /> </div> ); }; export default User;
UserEdit.tsx
import { useState, useImperativeHandle, forwardRef } from 'react'; import { Form, Input, Drawer, Button } from 'antd'; interface User { userId?: number; desc?: string; name?: string; } interface PropType { onSave: Function; } export interface UserEditRef { open: (currentUser?: User) => void; } const UserEdit = forwardRef<UserEditRef, PropType>((props, ref) => { //props const { onSave } = props; // state const [userEditOpen, setUserEditOpen] = useState(false); const [currentFormData, setCurrentFormData] = useState<User>(); // 暴露给父组件的属性,open是打开抽屉的方法 useImperativeHandle(ref, () => ({ open: (currentUser?: User) => { setUserEditOpen(true); setCurrentFormData(currentUser); }, })); const onCancel = () => { setUserEditOpen(false); }; const onFinish = (values: any) => { onSave(values); setUserEditOpen(false); }; return ( <Drawer title={ currentFormData ? '用户 | ' + currentFormData?.name : '用户 | 新建' } width="auto" open={userEditOpen} footer={null} onClose={onCancel} destroyOnClose > <Form initialValues={currentFormData} onFinish={onFinish}> <Form.Item label="组名" name="name" rules={[{ required: true, message: '请输入用户名!' }]} > <Input /> </Form.Item> <Form.Item label="描述" name="desc"> <Input.TextArea /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> 提交 </Button> <Button htmlType="button" onClick={onCancel} style={{ marginLeft: 8 }} > 取消 </Button> </Form.Item> </Form> </Drawer> ); }); export default UserEdit;
标签:const,name,示例,hooks,React,User,组件,import,desc From: https://www.cnblogs.com/lguow/p/18427773