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

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>;
        }
    }
};