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

上一个回答：

我设法获得对渲染组件元素的引用的唯一方法是：

将Bar包裹在ReactElement。
指定对ReactElement。
迭代渲染的元素以获取其第一个子节点。

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

Answer 2

我怀疑您正在获取Bar实例，因为您正在使用箭头函数语法，该语法从您声明它的上下文继承$('#box').on("click",function(){ clicked=clicked+1; ch=clicked%2; // remove `var` alert('ch'+ch); });。请尝试使用常规函数语法：

this

Answer 3

要访问React中的HTML元素，您可以使用findDOMNode方法，如下所示：

import ReactDOM from 'react-dom';

export default (Bar) => {
    return class Foo extends React.Component {
        componentDidMount() {
            const subjectEl = ReactDOM.findDOMNode(this.refs.subject);
        }

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

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

3 个答案: