react获取高阶组件内部子组件实例_react 获取子组件实例-CSDN博客

本文链接：https://blog.csdn.net/qq_30561157/article/details/119545725

这篇博客讨论了在React中使用高阶组件(HOC)时遇到的问题，即父组件无法直接获取到子组件的实例和状态。通过代码示例展示了如何通过传递回调函数来解决这个问题，使得父组件能够正确地访问到子组件内部的实例和状态。

摘要由CSDN通过智能技术生成

场景：

封装了一组件，它是一个基于ant design的表单组件。
由于它是一个高阶组件，导致父组件去获取实例的时候一直都拿不到内部的值和方法。下面就是大概代码。

子组件代码

import { Form } from 'antd'
@Form.create()
export default class index extends React.Component {
	constructor(props) {
        super(props)
        this.state = {
            isDisabled: true
    }
	return (
		<div>
			<Form>
                 <Form.Item label="例子">
                    {getFieldDecorator('test', {
                         rules: [{ required: true, message: '请输入' }],
                     })(<Input  placeholder="请输入" />)}
                 </Form.Item>
            </Form>
		<div/>
	)
}

父组件代码

import ChildForm from  '../../ChildForm.jsx'

export default (props) => {
	const ChildFormDom = useRef(null)
	return (
		<div>
			<ChildForm ref={ChildFormDom} />
		</div>
	)
}

这个例子里面ChildFormDom本以为能够拿到子组件中的state，
而实际获取到的是HOCcomponent。

变更代码如下
子组件

import { Form } from 'antd'
@Form.create()
export default class index extends React.Component {
	constructor(props) {
        super(props)
        this.state = {
            isDisabled: true
		}	
		const { dataFormDom } = props   //由父组件传入一个函数，获取this
        if (typeof dataFormDom === 'function') {
            dataFormDom(this)
        }
    }
	return (
		<div>
			<Form>
                 <Form.Item label="例子">
                    {getFieldDecorator('test', {
                         rules: [{ required: true, message: '请输入' }],
                     })(<Input  placeholder="请输入" />)}
                 </Form.Item>
            </Form>
		<div/>
	)
}

父组件


import ChildForm from  '../../ChildForm.jsx'

var dataForm = null
export default (props) => {
	return (
		<div>
			<ChildForm  dataFormDom={ (dom) => dataForm = dom } />
		</div>
	)
}

以上dataForm就拿到内部的实例，就可以获取state了。