React Hooks与TypeScript的一些使用心得——组件之间的Hooks传递

一、前言

用到的语言及框架如下：
1.React
2.TypeScript
3.Ant Design Pro

二、父组件的Hook传递给子组件使用

场景描述：父组件和子组件共用一个< Form>,我在子组件中想要赋值给其输入框，要用到userForm（）的setFieldsValue（）方法，但是，在父组件中已经声明了Form.userForm（），那么子组件就不能再声明一次Form.userForm（），如果声明了，则会报错，这时就要用到本文的Hook传递了，实现如下：

1.子组件
（1）在子组件中写一个接收父组件Hook的接口，如下：

interface SonProps{
    
    
  formHook?:any;    //传递父组件的form hook，参数类型记得要用any
}

（2）然后在SonForm里面调用Hook：

const {
    
    form}=props.formHook;

子组件完整代码如下：

import {
    
     Form,Input } from 'antd';
import React from 'react';
interface SonProps{
    
    
  formHook?:any;    //传递父组件的form hook
}

const FaterForm: React.FC<SonProps>=props=>{
    
    
	const {
    
    form}=props.formHook;  //Hook
	form.setFieldsValue({
    
    input2-1:'data1',input2-2:'data2'});
	return(
	        <Form.Item name="input2-1" label="input2-1">
	           <Input /> 
		     </Form.Item>
		     <Form.Item name="input2-2" label="input2-2">
		         <Input /> 
	          </Form.Item>
)
}
export default SonForm

2.父组件
（1）父组件定义的Hook如下：

const [form] = Form.useForm();  //使用form Hook

（2）在父组件引用的子组件时把Hook对象写上去，如下：

<SonForm formHook={
    
    form} /> 

父组件完整代码如下：

import {
    
     Form,Input } from 'antd';
import React from 'react';
impot SonForm from './SonForm'
const FaterForm: React.FC<>{
    
    
const [form] = Form.useForm();  //使用form Hook
return(
       <Form>
        <Form.Item name="input1" label="input1">
	      <Input /> 
	    </Form.Item>
	    <Form.Item name="input2" label="input2">
	       <SonForm formHook={
    
    form} /> 
	    </Form.Item>
       <Form>
       )
}

export default FaterForm