如何在 componentDidMount() 中获取 ReactJS 元素？

Question

我有 4 个特定 React 类的实例。在componentDidMount()之后我想存储每个实例的y位置。

如何处理呈现的元素？我不能使用类名，因为我有 4 个相同类的不同位置的元素。

我的 ReactJS 组件：

const Col = React.createClass({
    componentDidMount: function() {
        //here address the actual rendered col-instance
    },

    render() {
        return (
            <div className='col'>
            </div>
        );
    }
});

Answer 1

使用refs。

首先，在每个 JSX cols 元素上连接一个 ref 属性。然后，在componentDidMount 方法中使用这个ref 来访问组件的DOM 节点（实际的HTMLElement）。最后，获取元素的位置/偏移量或您需要的任何其他内容。

const Col = React.createClass({
    componentDidMount: function() {
        // this.refs.col1 is the actual DOM element,
        // so you can access it's position / offset or whatever
        const offsetTop = this.refs.col1.offsetTop;
    },

    render() {
        return (
            <div className="col" ref="col1">
            </div>
        );
    }
});

PS：我不确定您所说的元素y 位置是什么意思。无论如何，一旦你知道如何获取 DOM 元素 (this.refs.col1)，你就可以使用你需要的 javascript to retrieve the position。