如何在高阶组件的上下文中获取对渲染元素的引用？

Question

Foo是包装的高阶组件Bar。我想Foo获得对渲染Bar元素的引用。

import React from 'react';

export default (Bar) => {
    return class Foo extends React.Component {
        componentDidMount = () => {
            // How to obtain reference to the element that Bar renders to?
        }

        render() {
            return <Bar {... this.props} />;
        }
    }
};

尝试使用ref解析对象来获取对渲染元素的引用，该对象是的实例，Bar与元素本身相反：

import React from 'react';

export default (Bar) => {
    return class Foo extends React.Component {
        componentDidMount = () => {
            console.log(this.refs.subject instanceof Bar);
        }

        render() {
            return <Bar ref='subject' {... this.props} />;
        }
    }
};

Answer 1

使用findDOMNode：

我认为，由于this.refs.bar是的实例Bar，因此可以findDOMNode用来获取对呈现元素的引用。

import React from 'react';
import ReactDOM from 'react-dom';

export default (Bar) => {
    return class Foo extends React.Component {
        componentDidMount = () => {
            console.log(ReactDOM.findDOMNode(this.refs.bar));
        };

        render() {
            return <Bar ref='bar' {... this.props} />;
        }
    }
};

先前的答案：

我设法获取对呈现的组件元素的引用的唯一方法是通过：

1. 包裹Bar中ReactElement。
2. 分配对的引用ReactElement。
3. 迭代渲染的元素以获得其第一个子节点。

import React from 'react';

export default (Bar) => {
    return class Foo extends React.Component {
        componentDidMount = () => {
            console.log(this.refs.bar.firstChild);
        };

        render() {
            return <div ref='bar'>
                <Bar {... this.props} />
            </div>;
        }
    }
};