React函数组件实现获取子组件标签（forwardRef的使用）

需求说明

父组件触发事件改变子组件的状态

举例

例子： 切换父组件tab时，重置子组件表单。在第一个tab下的搜索表单填写的搜索条件，在切换tab时，需清空表单内容

代码结构

const parent = () => {
	return (
		<>
		  <Tabs onChange={changeTabs}>
	        {tabsList?.map((tabItem: tabItem) =>
	          <TabPane tab={tabItem.keyName} key{tabItem.appKey}></TabPane>)}
	      </Tabs>
	      <SearchForm {...DynamicFormParams} />
		</>
	)
}

功能实现

由于触发事件在父组件，无法从子组件传值。首先想到的是用ref来获取到实例。如下

const parent = () => {
	const searchRef = React.useRef()
	return (
		<>
		  <Tabs onChange={changeTabs}>
	        {tabsList?.map((tabItem: tabItem) =>
	          <TabPane tab={tabItem.keyName} key{tabItem.appKey}></TabPane>)}
	      </Tabs>
	      <SearchForm 
	      ref={searchRef}
	      {...DynamicFormParams} />
		</>
	)
}

此时出现以下报错

React不建议在函数组件上使用ref，根据报错找了下forwardRef文档。
做了一下调整

// 父组件
// 正常从useRef获取一个ref对象并附给子组件
const parent = () => {
	const searchRef = React.useRef()
	const changeTabs = async (currentKey: string) => {
	    await setSearchValue({})
	    // 清空子组件表单内容
	    SearchNode?.current?.resetFields()
	    setCurTab(tabsList.find((item: tabItem) => item.appKey == currentKey))
    }
	return (
		<>
		  <Tabs onChange={changeTabs}>
	        {tabsList?.map((tabItem: tabItem) =>
	          <TabPane tab={tabItem.keyName} key{tabItem.appKey}></TabPane>)}
	      </Tabs>
	      <SearchForm 
		      ref={searchRef}
		      formList={formList}
		      searchFun={searchFun}
		      initVal={initVal}
	       />
		</>
	)
}

// 子组件
// 用React.forwardRef包裹子组件，接收两个参数，依次是props和ref
// 将ref添加在要获取的组件上
// 注意：若需设置TS类型，第一位为ref的类型，第二位为props的类型
const SearchForm = React.forwardRef<FormInstance, SearchFormParams>(({formList,searchFun, initVal}, ref) => {
	return (
		<Form
	      form={form}
	      onFinish={onFinish}
	      initialValues={initVal}
	      ref={ref}
	    >
	      <Row gutter={24}>
	        <DynamicForm
	          formList={formList}
	        />
	        <Col {...rowList}>
	          <FormItem>
	            <Space>
	              <Button type="primary" htmlType="submit">搜索</Button>
	              <Button onClick={onReset}>重置</Button>
	            </Space>
	          </FormItem>
	        </Col>
	      </Row>
	    </Form>
	)
})

至此，功能实现，并且不再报错。
其他详细信息查看 官方文档