[JavaScript知识库]react获取高阶组件内部子组件实例

场景：

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

使用了hooks，点击看这里

子组件代码

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了。